手机端 4-1

手机端

理论

视口：浏览器显示内容的区域

布局视口（layout viewport）：就是我们开发时的布局大小（一般为设计稿），一般移动设备都默认设置一个布局视口

视觉视口（visual viewport）：用户可以看见的网站的区域

理想视口（ideal viewport）：布局视口的宽度应该与视觉视口一致，可通过meta视口标签设置

meta标签

<meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no”>

name：指定数据名称

width:设置布局视口的宽度，device-width 是特殊值，使布局视口宽度与视觉视口一致

initial-scale：初始缩放比，一般设置为1

maximum-scale:最大缩放倍数，一般设置为1

minimum-scale:最小缩放比，一般设置为1

user-scalable：用户是否可以缩放yes、on或用1、0设置

物理像素（分辨率）&物理像素比

电脑端：1px=1物理像素

手机端：1px！=1物理像素

物理像素比=1px能显示几个的物理像素

比如在iPhone8 宽度的物理像素为750，视觉视口是375px，所以1px=2个物理像素

二倍图&多倍图：原因是因为移动端的物理像素比

比如：iPhone8的物理像素比是2，如果现在我们要引入一个50px*50px的图片，若我们直接使用50px*50px的，在手机中显示时因物理像素比的问题（1px=2个物理像素），会将图片放大二倍，导致图片模糊，此时如果将图片原始大小设置成100px*100px的，在布局时将大小设置为50px*50px，在手机端就因为物理像素比显示成100*100

多倍图是因为不同的移动设备的物理像素比不同

rem&em&px

em:是指当前元素的字体大小（注意不是父元素字体的大小）

rem:r代表的是root(根)，网页的根节点就是html（注意不是body），所以rem是根据html的字体大小改变的