移动端布局
作者：互联网
meta标签的设置
忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />
忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />
当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios7.0版本以后，safari上已看不到效果 -->
将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->
meta标签的设置
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
width = device-width：宽度等于当前设备的宽度
initial-scale： 初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
屏幕的像素密度
- dpi 硬件和安卓设备上
- ppi 苹果设备上
常用的单位
- px 像素
- em 相对于父级元素计算的单位
- pt 磅
- % 高度自适应
- deg 角度值
移动端中重要单位 rem 相对于根元素html的font-size进行计算的 默认 1rem = 16px
移动端的布局思路(推算过程)
- 移动端的页面 浏览器的大小都是不一样的 但是html的font-size永远都是16px
- rem单位是相对于html的font-size进行计算的
- 网页中有一个宽高大小为2rem的盒子 那么这时盒子在浏览器中的大小是(32px*32px)
- 考虑适配所有的移动端 可以使用媒体查询改变不同屏幕尺寸下的font-size的值
- 小屏手机 => font-size:12px
- 中屏手机 => font-size:14px
- 大屏手机 => font-size:16px
移动端的计算方式总结
重要公式: 设备像素比(dpr) = 物理像素 / 逻辑像素
- 设备像素比简称为dpr 真实设备的调试设备的比例
- 物理像素:设计图大小
- 逻辑像素:前端需要设置的css样式 px
需求:设计图宽度640px 导航高度为88px 求当前的高度在页面中怎么显示?
- 调试工具是iphone5
- 88px/2=44px
- 44px是一个固定的值 如何把px转换为rem?
- 小屏手机 => font-size:12px => 3.67rem
- 中屏手机 => font-size:14px
- 大屏手机 => font-size:16px
常见设备像素比
- 设计图为640px的时候 dpr为2 调试在iphone5
- 设计图为750px的时候 dpr为2 调试在iphone6、7、8
- 设计图为1080的时候 dpr考虑为3 调试在iphone6、7、8 plus
第一种布局方式：媒体查询+rem
第一种布局方案的总结
- 优点:好理解 简单方便
- 缺点:需要写很多套媒体查询、计算有误差
第二种布局方式: vw + rem
vw:viewport width 视口宽度 1vw = 视口的百分之一
100vw和100%的区别
- 当浏览器没有滚动条的时候 100vw和100%相等
- 当浏览器有滚动条的时候 100vw和100%不相等
推算思路
- 100vw沾满了整个浏览器,拿到设计图 1vw就等于设计图的百分之一
- 100vw/设计图的大小=每一份视 的大小
- dpr=物理像素/逻辑像素
第一种情况:当设计图宽度是640px的时候 逻辑像素 = 640px/2
- 100vw = 320px
- 1vw = 3.2px
- 0.3125vw = 1px
- 导航高度为88px=>44px 44px*0.3125vw = ?
- html{
font-size:0.3125vw
}
- 每次在设计图上量出的值乘以0.3125很麻烦
- 可以把44px直接改成44rem，因为rem是根据根元素计算的
第二种情况:当设计图宽度为750px的时候 逻辑 = 750px/2
- 375px = 100vw
- 3.75px = 1vw
- 0.2667vw = 1px
总结:
- 在设计图上量出设计图宽度尺寸
- 640px的时候 html{1px = 0.3125vw}
- 750px的时候 html{1px = 0.2667vw}
- 计算方式
- 物理像素/dpr = 逻辑像素px
- px => rem
标签：font,vw,布局,设计图,像素,rem,移动,size 来源： https://blog.csdn.net/qq_63608418/article/details/121931225