移动端适配根本总结_像素_年夜众

根本知识

像素

像素实在分为两种，分别是物理像素和CSS像素

物理像素（设备像素）

物理像素，顾名思义，显示屏是由一个个物理像素点组成的，通过掌握每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。

常日我们看一些电子设备的参数，比如分辨率用的便是物理像素。
它合营屏幕尺寸（把稳：屏幕尺寸常日是说屏幕的对角线长度），可以打算出PPI（每英寸像素取值），即每一英寸物理像素数量。
PPI越高，解释屏幕能供应更多细节。

CSS像素

CSS和js利用的抽象单位，浏览器内的统统长度都因此CSS像素为单位的，CSS像素的单位是px。

物理像素和CSS像素之间的关系(dppx，DPR)

在非高清屏及未缩放的状态下，一个CSS像素即是一个物理像素，而在一些PPI非常高的屏幕（例如苹果的视网膜屏幕）上，如果还让一个CSS像素即是一个物理像素，就会导致网页上的元素变得非常小，因此高PPI屏下，常日一个CSS像素即是两个乃至三个物理像素（由浏览器厂商决定，不同浏览器设定的值可能不同）。
如果一个CSS像素占用n个物理像素，那么我们就说此时的dppx(dots per px)为n。

以是，我们可以用dppx描述物理像素和CSS像素之间的关系。
dppx除了和PPI有关，也和当前缩放状态有关，举个例子，在非高清屏下，如果没缩放，一个CSS像素占用一个物理像素，此时是1dppx，但如果将页面放大到200%，此时一个CSS像素即是两个物理像素，即2dppx。

DPR（设备像素比，devicePixelRatio）描述的是未缩放状态下，物理像素和CSS像素的初始比例关系，打算方法如下图。

DPR由浏览器厂商决定，我们无法修正，但可以通过window.devicePixelRatio读取DPR。

可能有人疑问DPR和dppx到底啥关系，我们可以认为DPR描述的是未缩放状态，而dppx可以描述任意时候的状态，未缩放状态下的dppx和DPR相等，当有缩放操作时，此时的物理像素和CSS像素的比例关系就只能用dppx描述了。

视口（viewport）

视口也叫作初始包含块，之以是叫这个名字，是由于它包含了元素，它的宽度是所有CSS百分比宽度推算的根源。

在桌面浏览器，视口的宽度等同于浏览器窗口的宽度，高度即为浏览器窗口的高度。
但移动端就有点繁芜了，移动真个视口分为布局视口和视觉视口。

布局视口（layout viewport）

说布局视口之前，我们先说一下桌面真个页面放到移动端浏览器后涌现的问题：由于早期的页面很多采取固定宽度的布局，导致放在移动真个小窗口下涌现横向的滚动条，不便于用户查看，以是浏览器厂商研究出告终构视口。
布局视口的宽度一样平常在768px~1024px（由浏览器厂商设置），常见宽度980px，虽然设置了很大的宽度，但在没有手动设置宽度的情形下，布局视口仍会容纳在一屏里（说白了，便是把980px的东西装在320px的屏幕里），这样，浏览器会避免涌现横向滚动条。

获取布局视口宽度：document.documentElement.clientWidth

布局视口除了和meta设置的width有关，还和scale有关，scale后面会说。

视觉视口（visual viewport）

用户正在看到的网页的区域，大小是屏幕中CSS像素的数量。

初始状态下，一样平常视觉视口会即是布局视口。

空想视口

当布局视口的宽度达到空想状态时，便是空想视口，空想视口中的页面有最空想的宽度，用户进入页面不用缩放。

缩放（scale）

事理：可以理解为修正dppx，举个例子，假设一屏幕DPR为2，即1px对应2pt，如果这个时候，我们设置scale=0.5，那么dppx就会从2变成1，即1px对应1pt。
以是，通过缩放我们可以调度自己所能掌握的最小物理像素粒度。

缩放会影响布局视口的大小，由于浏览器会只管即便让布局视口铺满屏幕，以是当我们设置scale=0.5时，布局视口的宽度会自动变为原来的两倍。

详细如下图所示。

<meta name=\"大众viewport\"大众 content=\"大众width=device-width,initial-scale=1.0\"大众>

<script>

console.log(document.documentElement.clientWidth); //结果为375

</script>

<meta name=\公众viewport\"大众 content=\"大众width=device-width,initial-scale=0.5\"大众>

<script>

console.log(document.documentElement.clientWidth); //结果为750

</script>

可能有人会问，scale的初始值是多少？实在这取决于viewport的宽度，由于浏览器会只管即便让布局视口铺满全屏，以是浏览器会根据布局视口的大小动态调度scale的初始值大小，从而使布局视口铺满全屏。

利用缩放的好处：对付DPR为2或更高的屏幕，如果不做缩放操作，我们所能掌握的最小物理像素粒度是2pt或更多物理像素，这样带来了两个问题。

如果设计图上某个边框标识的大小是1px,那解释设计师想让这个边框在任何屏幕上都是1像素，在普通屏幕上，不会有问题，但在retina这种高清屏上，当我们用1px润色border时，实际上会有2pt渲染为border，导致border看上去比普通屏的border宽。

}</style><div id=\"大众log\"大众></div>

对付高清屏，如果我们掌握像素的粒度还是2pt或3pt，实际上我们并没有充分利用高清屏展现细节的能力。

办理这两个问题的方法便是缩放，我们把scale设置为1/dpr。

meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');

这样1px就对应1pt，我们就可以办理1px border问题和图片的高清问题了。

适配方案

固定高度，宽度自适应

即垂直方向利用固定大小，水平方向利用百分比，flex。

适宜场景：比较适宜列表式的构造。

固定宽度，viewport缩放

开拓页面时完备按照和设计图1:1的比例开拓，设计图，页面，视口宽度利用同一个宽度，单位利用px即可，由于浏览器会只管即便将布局视口铺满全屏，以是浏览器会自动帮助我们缩放。
举个例子，假设设计图是640px宽，那我们这样设置。

这个时候会创造，浏览器会帮助我们将页面铺满全屏，而且这是绝对的等比例缩放。
图片、笔墨等等所有元素都被缩放在手机屏幕中。

rem做宽度，viewport缩放

根据屏幕宽度设定rem值，须要适配的元素都利用rem为单位，不须要适配的元素还是利用 px 为单位。

统共分两步：

动态设置font-size

缩放viewport

第二步是对页面适配的优化，修正scale是为理解决前面说到的1px border问题。

淘宝的Flexible利用的便是这种方案，而且它加了data-dpr属性，这样我们就可以根据不同的DPR设置不同的样式。

方案总结

方案一比较适宜列表这种比较固定的构造，方案二适宜的场景比较多，而且实现大略，但须要把稳它会将页面的所有元素都缩放，方案三适宜的场景是页面内有些元素须要适配，有些元素不须要适配。
总体来讲，方案二和方案三是比较常用的办法。

参考文献：

https://www.zybuluo.com/gongzhen/note/170557

郑航的知乎回答https://www.zhihu.com/question/35221839

https://github.com/amfe/article/issues/17

https://github.com/riskers/blog/issues/18

https://riskers.github.io/share/share/flexible.htm#1

https://github.com/riskers/blog/issues/17

https://github.com/amfe/lib-flexible

http://www.html-js.com/article/2402

http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/

https://www.nihaoshijie.com.cn/index.php/archives/593

http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/