移动端布局
作者：互联网
准备工作：设置meta标签；
<meta name="format-dtection" content="telephone=no"/>
视口的设置：
utf-8 国际编码 charest 编码
viewport 适口 ，所能看到的范围，
width=device-width 宽度等于屏幕宽度；
initial-scale：缩放比例1
minimun-scale:最小比例；
maximun-scale:最大比例；
user-scalable：用户是否可以手动缩放；
dpr设备像素比=设备像素/逻辑像素（rtina屏的手机上，dpr为2，1个像素相当与2个物理像素）；
rem 相对单位 相对于html根元素 font-size进行计算的；
推算思路；
1、写网页都是px像素单位，px是固定不变的。
2、移动端切换的时候，宽高大小不一样。
3、网页中有一个盒子（2rem），html字体默认大小为16px
4、改变每一个移动端的html{font-size}的值，
计算公式：dpr=物理像素/逻辑像素
dpr表示物理像素比；
物理像素表示ui设计图量出来的大小；
逻辑像素表示前端需要设置的css样式的大小；
常见的设计图的dpr的大小：“640px的设计图dpr为2，750px的设计图dpr为2，1080px的设计图dpr为3；
rem=逻辑像素/font-size；
总结：当设计图为640px的时候，dpr为2，计算方式为 物理像素/dpr/当前html字体大小的值；
苹果5 默认字体大小12px;
苹果6、7、8默认字体大小为14px;
苹果plus默认字体大小为16px;
移动端第一种布局方式：媒体查询+rem单位实现
优点：简单好理解；
缺点：计算麻烦，有多个设备要写多个媒体查询；
第二种移动端布局方式：
vw单位（viewport width）；
关于vw单位的理解：视口宽度 1vw=浏览器视口的百分之一；
100vw是否等于100%？
浏览器横向有滚动条的时候不等于；
没有滚动条的时候等于；
推算思路：100vw可以看成100%width；
ui设计图：1vw=设计图的1%；
设备像素比=物理像素比/逻辑像素比；
1、设计图是640px dpr为2（默认）
640px/2=100vw;
320px=100vw；
1vw=3.2px;
1px=0.3125vw;
2、设计图是750px dpr为2（默认）
750px/2=100vw;
375px=100vw;
1vw=3.75px;
1px=0.2667vw;
总结：当设计图是640px的html ,字体大小为0.3125vw;
当设计图是750px的html,字体大小为0.2667vw；
优点：简单；
缺点：无
标签：字体大小,dpr,布局,设计图,像素,vw,移动,100vw 来源： https://blog.csdn.net/m0_46525076/article/details/117449676