❀一些听起来复杂的概念
物理像素(physical pixel)：粗暴的理解就是屏幕上的点点，能够显示颜色的最小的一个电子元器件，真实存在的东西！同个尺寸大小的手机分辨率不同，意思就是面积相同屏幕上存在的点点的多少不同，代表的屏幕点点的数量。
（以下是两个屏幕物理像素不同的设备↓）
**设备独立像素(density-indenpendent pixel)：**css中设置的像素（px）指的就是该像素。很早之前在没有Retina屏幕之前，设备独立像素与物理像素是相等的关系，也就是说1px对应的就是移动端上的真实存在的一个物理点点，所以问题就来了 (⊙_⊙)?
带来的问题：从最初的颗粒感相当大的屏幕，到720P再到1080P，甚至现在的4K屏幕，手机的物理分辨率越来越大了，这样就暴露出来一个问题，如果我们的手机分辨率翻倍，尺寸不变，设备独立像素与物理像素是相等关系的前提下，我们的图像不就会被成倍的缩小吗？不用担心，乔布斯想到了一个概念那就是『逻辑分辨率』
关于逻辑分辨率：乔布斯在iPhone4的发布会上首次提出了Retina Display(视网膜屏幕)的概念，在iPhone4使用的Retina显示屏幕中，把2×2个物理像素当一个像素来使用，意思就是1px的内容被呈现在4个物理像素上，这样让屏幕看起来更精致，但是元素的大小确不会改变。从此以后高分辨率的设备多了一个逻辑像素，这些设备逻辑像素的差别虽然不会跨度很大但是仍然有点差别，于是便诞生了移动端页面需要适配这个问题，既然逻辑像素由物理像素得来，那他们就会有一个像素比值，就叫做：『dpr』
例如：
我们能看到iPhoneX和iPhone6/7/8的横向逻辑像素都是375
iPhoneX因为实际尺寸要长一点所以它的纵向逻辑像素自然会长一点，iPhoneX比iPhone6/7/8的屏幕实际物理像素要高很多，所以屏幕看起来更精致，dpr也就更高
！！！所以逻辑分辨率我理解它就是一个体现了设备实际屏幕大小的单位：
❀实际适配的方式
一些打脑壳的概念：
viewport基础：viewport中文就是“视口”的意思，也就是浏览器中用于显示网页的区域。
在PC端其大小就是浏览器可视区域的大小，所以我们也不会太关注此概念。
在移动端绝大多数情况下 layout viewport（实际布局的范围）都大于浏览器可视区，那么就会有滚动条了，所以不管layout viewport、visual viewport、ideal viewport这些复杂的概念只要第一步将viewport设置为可见区域的范围就对了 ↓
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,viewport-fit=cover" />
**—接下来是真正的适配环节↓—-**
！！！等比缩放型：rem布局（flexibel属于rem布局）、vw+vh布局
1.等比缩放—flexible：是阿里早起开源的一个移动端适配解决方案，引用flexible后使用rem布局，rem是html结构中根元素的font-size大小，假如根元素的font-size：14px，那么在html结构中1rem就是14px，2rem就是28px，flexible做的事情就是把根元素的font-szie设置成屏幕的十分之一，默认使用750的设计图来进行布局，flexibel根据设备的尺寸设置动态设备的根元素的font-size大小
已知1rem = 屏幕的十分之一大小
20px ： 750px = ？？ ： 10rem
那么设计图上的20px在移动设备上等于 20 / 75 rem
所以flexibel就只做了一件事：动态设置根元素的font-size
2.等比缩放—vw
css有了新的单位vw，vh，1vw是屏幕宽度的1%，1vh是屏幕高度的1%
vw不好算，在项目过程中可以使用插件来实现px到vw的转换
那么问题又来了？？？↓
❀最后的思考
用户买更大尺寸的移动设备是为了看更大的字吗？好像大都是为了看到更多的内容，所以经过分析发现如果设计图的尺寸对应设备的逻辑分辨率，px搭配flex流式布局可能呈现出来的效果是最切合用户使用习惯的，而不是看到等比放大的内容。
over
(╹▽╹)卑微菜鸟且玻璃心写的不好请轻轻喷，哪里不对请指正我马上改、感谢阅读~唛唛唛
点击咨询 