共计 1399 个字符，预计需要花费 4 分钟才能阅读完成。
挪动端适配
波及挪动端适配，首先要弄清楚几个概念：
1 viewport：
即设施上用于显示网页的那一块区域，也叫视口。它并不等同于浏览器的可视区域，他可能比浏览器的可视区域大，也可能小。在 pc 上，通常是多少的设施分辨率就显示多少别离率，此时 css 1px 通常就等于物理的 1 像素，且因为可能通过调整浏览器窗口大小来调整浏览器的可视区域，所以在 pc 上能够不必那么在意 viewport。
然而到了挪动设施上，这个 viewport 便显得尤为重要了，因为咱们无奈调整浏览器的可视区域，而它的可视区域就是屏幕尺寸大小。然而为了可能将内容全副显示进去，所以很多网站会将 viewport 宽度设定为 980px 或 1024px，但这样造成设施上的浏览器呈现了横向滚动条。
同时因为对于雷同尺寸的设施，却有了不同的分辨率（高分屏等等），这导致了 css 1px 不再是等于 1 物理像素了。对于高分屏，尽管分辨率进步了，但尺寸无奈变大，所以只能在 1px 像素上包容更多物理像素。
2 viewpoet 像素：
它实质是 DIP（Device Independent Pixels），中文意思设施无关像素，是与上述所有像素都无相对逻辑关系的一个单位 。其实是浏览器外部对 逻辑像素 进行再解决的后果，简略来了解就是调整逻辑像素的缩放来达到适应设施的一个中间层
3 设施独立像素 dip：
即与设施无关的像素，因为在当初雷同的设施尺寸曾经有了不同数量级的物理像素，而咱们应用的 css px 就是设施独立像素。
4 设施像素比 dpr：dpr = 设施物理像素 / 设施独立像素
5 每英寸像素 ppi：指的是屏幕在每英寸的物理像素
6 物理像素：设施能管制显示的最小单位 咱们常说的分辨率指的就是物理像素
7 设计师给的设计图的像素 px：物理像素
咱们在对不同尺寸的手机进行适配时，其实应该要留神的是，对于更大的屏幕，应该展现更多的内容，而不是更大的内容。然而很多时候，设计师并不会针对性的给出每一套设计，同时如果真要针对不同尺寸进行不同的适配，简略点的可能还好，灵活运用布局或者可能实现，然而对于简单些的则可能要通过媒体查问来实现了。这样老本上也更高。所以理论要如何实现还是看需要与条件。
适配：
在过来很多人都采纳 rem 的办法来实现挪动端适配，rem 作为一个以根元素 font-size 为基准的单位，而过来经常配合 flexible 实现不同挪动设施端兼容自适应问题。实际上 rem 只是在 viewport，vw，vh 还未很好的实现兼容的时候的一个代替过渡品，而当初齐全能够用 px + vw 来实现挪动端适配，要求高的能够媒体查问。同时，要留神设置好 viewport。
如果肯定要应用等比，或是有肯定需要。则能够采纳 px + vw，并以 rem 过渡，本质上还是 px+vw。上面是具体实现的例子：
对于 iPhone6 来说，如果想要 1rem=100px 的适配：
100vw = 375 px，1vw = 3.75px，1px = 0.2666666667vw 约等于 0.267vw
能够得悉 当 1rem = 100px = 26.67vw 时，即可满足要求
所以再款式中设置 html {font-size: 26.67vw}, 此时 1rem = 100px
这里尽管应用了 rem，但曾经失去了原有意义仅仅作为一个过渡单位，因为如果间接应用 vw 的话，换算起来非常麻烦。
进一步思考不便的话能够通过应用相干的 px 转 rem 的插件或是 loader 来进行解决，这样基本上就实现自适应了。