第一天写移动端网页

最新推荐文章于 2023-11-20 09:01:07 发布
转载 最新推荐文章于 2023-11-20 09:01:07 发布 · 155 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://segmentfault.com/a/1190000017383155

本文分享了使用rem进行移动端布局的方法，强调了响应式设计的重要性。同时，文章深入探讨了flex布局的巩固应用，解决了input点击后文本框边框不再出现的问题，并提到了图片自适应的实现。此外，作者还表达了对于css命名、书写规范及h5规范的学习需求。

学会的:
1.如何使用rem写移动端布局（其实今天只是直接调用随手机屏幕分辨率改变而布局仍然适配的js文件）
2.巩固flex布局
3.input点击后文本框边框不会再出现，文字消失
4.图片自适应
急需要学:
1.css命名，书写规范，h5的书写规范
2.js事件

移动端网页的基础制作
m0_50266751的博客
10-14 834
移动端不同于pc端，移动端的设备众多，不能将长宽高写为固定的宽高，那样的话在不同长宽高比的移动设备上就会显示差距较大，在移动端网页布局的显示不能追求完全的一致，只能是差距不大即可，这是有移动设备的种类繁多决定的。 比较好的布局原则是留白固定，宽高不可固定。 Viewport： 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的
Vue2移动端项目开发流程
Mr.小灰狼_随笔
09-02 6343
Vue 项目开发流程 目录 移动端电影项目 1、项目效果 2、开发项目流程 3、开发环境 4、初始化项目 @4.5.19 版本Vue脚手架创建项目 UI 图形界面创建项目 Mac 电脑使用 Vue.cli4.X搭建项目流程 5、Vant 移动端组件库 5-1、安装 Vant 5-2、自动按需引入组件( 推荐 ！) 5-3、移动端样式设置（适配） 6、路由规划 7、网络请求 实战案例 :
移动端网页开发)------响应式网页
m0_56175362的博客
04-07 678
移动端网页开发 移动端网页开发的两种方案： 响应式网页 开发一个新的网站。使用移动端的布局方式。 响应式网页 概念 同一个网页会根据视口的不同，显示不同的样式。 优缺点 优点 面对不同分辨率的设备比较灵活。 比较快捷的解决多设备的显示适应问题。 缺点 如果兼容的设备比较多，则工作量比较大，效率比较低。 代码会比较臃肿，加载时间会比较长。 适用场景 如果是一个小型的网站，我们一般使用响应式网页，因为响应式的开发量比较小，开发速度比较快。 如果是一个大型的网站，比如说，小米，腾讯新闻等等，适合第二
移动端网页
difuchai5874的博客
04-18 1018
1.手机适配协作模式 转载自：https://github.com/amfe/article/issues/17 2.几个基本概念 1.视窗viewport visual viewport虚拟视窗 layout viewport布局视窗——比虚拟视窗大，可理解为，不改变大小或形状的大图像 2.像素换算 物理像素(physical pixel)：物理像素又被称为设备像素，他是...
如何写移动端页面
e87e09e11的博客
04-06 2038
移动端rem的两种用法 1 1rem=100px; 2 1rem=十分之一屏幕宽
移动端页面的写法
weixin_44196873的博客
07-31 1291
第一步 ：html 页面 meta 标签声明 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 第二部 ：CSS中将所有元素转换为怪异盒模型： *{ box-sizing：bord...
移动端网页怎么做？
weixin_33712881的博客
09-28 507
移动端网页最大的特点是什么？自适应不同尺寸的屏幕！高大上的叫法:响应式！知道了自适应网页怎么做岂不是能很好解决问题了？那么自适应网页怎么做呢？网上关于这方面的文章有很多，我简单的整理一下。一、 HTML设置在head中加入meta标签<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-sca...
前端移动Web第一天：京东移动端首页案例-流式布局.zip
04-16
这个"京东移动端首页案例-流式布局.zip"压缩包提供了一个实践性的示例，让我们深入理解如何构建适应不同屏幕尺寸的流式布局。流式布局是现代Web设计的核心，它允许网页内容在各种设备上自适应展示，无论是桌面、平板...
移动web 第三天移动端特点、百分比布局、flex布局
12-25
"移动Web第三天移动端特点、百分比布局、Flex布局" 在移动Web开发中，了解移动端特点是非常重要的。移动端网页和PC端网页有很多不同点，如屏幕尺寸、分辨率、视口等。下面我们将详细讲解移动端特点、百分比布局和...
移动web 第五天移动端适配
12-25
移动Web的移动端适配是构建跨设备兼容网页的关键步骤，特别是在当前智能手机和平板电脑多样化的情况下。适配的主要目的是确保无论用户使用何种设备，都能获得一致的浏览体验。在这个过程中，CSS扮演了至关重要的角色...
乐淘电商移动端MUI框架第一天学习心得
综上所述，乐淘项目第一天的介绍强调了移动端前端开发的重要性，并着重讲解了Mui和Bootstrap两个UI框架。Mui以其轻量、原生UI体验和流畅的下拉刷新功能获得了关注，而Bootstrap则以其强大的响应式布局和丰富的组件库...
移动端网页模板：响应式自适应HTML源码
根据所提供的文件信息，我们可以从中提取出与网页设计和前端开发相关的一系列知识点。这些知识点包括但不限于HTML、自适应响应式设计、网页源码和网站模板的使用和构建。下面将详细阐述这些知识点： 标题中的“(188...
前端学习--移动端页面的开发制作
最新发布
AGW.的博客
11-20 1783
主要介绍flex布局、流式布局、rem适配布局、以及less等。本文是根据pink老师前端web全套课程书写，如果有不理解的地方请移步到B站查找并观看相应课程。
写移动端的两种方法
m0_46329256的博客
03-26 485
写移动端的两种方法 第一种:vw+rem法1.计算rem:确定移动端设计图宽度width: 640px 750px 1080pxdpr: 2 2 3代码: width:320px width:375px ...
使用html编写一个（移动端）静态页面
qq_53566222的博客
07-14 5629
html代码 喜马拉雅移动端 css代码 图片就自行想办法 成品展示 中间是一个轮播图
CSS——利用HTML+CSS书写移动端页面的相关知识点
Bonsoir777的博客
08-03 1406
本文主要介绍的是使用HTML+CSS书写移动端页面的相关知识点。
移动端网站开发
weixin_52655964的博客
09-09 1685
rem单位 是相对于HTML字体大小的单位，把HTML字体大小作为我们网页的统一参照尺寸，当我们按照这个大小进行布局时，最终改变对应的HTML字体大小，我们的所有元素都会等比缩放。
一篇真正教会你开发移动端页面的文章(一)
前端大全
12-06 2370
（点击上方蓝字，快速关注我们） 来源：HcySunYang http://hcysun.me/2015/10/16/一篇真正教会你开发移动端页面的文章(一)/ 从我工作以来，开发的一直都是移动端的页面，只有偶尔去开发几个PC端的页面，现在是一个移动端的时代，移动先行已经深入骨髓，作为一个web前端开发，如果你还在为如何开发移动端页面而迷茫，或者你还在为开发出了一个在你
移动端——前端页面编写总结
if_smile的博客
01-05 2343
练习一：百度首页编写     小结：         1.不要用空格分割元素，浏览器或者手机空格大小不一致         2.css，js事件用动态绑定的方式，不要写在行内样式中。防止其它人添加样式被覆盖         3.少用p标签，浏览器不支持。         4.css样式从后往前找。知道怎么回事，但是还是没有理解怎么优化         5.颜色用16进制，字母机器识别不
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值