前端自适应方案总结，前端最佳自适应方案

关于css的像素

1.物理像素(physical pixel)

我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒（物理像素）组成的。

2.逻辑像素（CSS像素）

是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。一个CSS像素对应多少个设备像素是根据当前的缩放比例

12px对应36px，缩放0.5，12px对应18px。扩大2.0,12px对应72px。

3.设备的像素比(device pixel ratio)简称DPR

它的数值体现了物理像素和逻辑像素之间的关系，用公式可以计算出该设备的DPR的大小：

DPR = 物理像素 / 逻辑像素

那么了解了上面这些概念，就可以知道，为什么css在pc上写着font-size=12px;但是换到手机上却变小了？自然是因为DPR。

没错，我们在电脑屏幕上的DPR是1，但是手机却不同，可能是它可能是2，也可能是3。获取设备DPR的方法还是有的：

1.在JavaScript中，通过window.devicePixelRatio来获取

2.在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同DPR的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

4.rem（font size of the root element）

rem是个单位，单位大小由它第一代老祖宗的font-size的大小决定。“%” 把 font-size 设置为基于父元素的一个百分比值。

em是相对长度单位。相对于当前对象内（父元素）文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高度16px（16像素）。所有未经调整的浏览器都符合: 1em=16px。

5.font-size是什么？

可以看做是字符高度,(不一定等于行高)，半角符号或字母(长方形)的宽度为px值的一半，全角符号或汉字，由于是正方形，宽度即等于高度，因此宽高都等于px值

6.为什么要根据不同大小的屏幕设置rem？

假设375px高的屏幕，字体为16px。一个汉字所占的长宽都是16px。假设50个字符竖放占满屏幕的高，缓存700px的屏幕就只占一半了，通过rem调整可以动态的保证，在不同大小的屏幕上保持一致。

7.为什么需要自适应，自适应是做什么？

假设一个大屏幕1920 x 1080，使用px作为单位进行布局时，使用了中间的1080 x 720 。到了1080 x 720的屏幕上就直接占满百分百了。所以px是一个绝对单位，而css的px大小是由DPR决定的，正常电脑的DPR是1，移动设备则各有不同。

使用px进行自适应时就需要通过@media针对不同的大小进行不同的设置。

使用vw 、vh、%则可以根据屏幕自动进行响应。

参考：https://www.cnblogs.com/zhuanshen/p/7098707.html

8.如何完美自适应？

通过Flex Column去自适应高度，vw作为单位自适应宽度。仍有不足通过vw无法设置最小的网页宽度，网页会随着屏幕的缩小无限缩小

通过Flex Column去自适应高度，rem作为单位自适应宽度。 例如1920时1vw=1rem，JS监控屏幕大小每次网页加载初始化rem，通过rem可以设置最小字体；通常PC端的最小网页宽度为1100px;

自适应方案思考

1.占满屏幕的页面

这种条件下就可以考虑rem+min-width，rem根据屏幕的大小动态调整，并且可以设置一个最小值；同时设置最小屏幕宽度。这样能保证需要满屏的网页在任何设备上都是一样的效果。

2.不占满屏幕的网页

这种条件下一班使用固定的px单位，同时两边留白，随着屏幕变小两侧留白也减少，设置的最小屏幕宽度应该等于网页满屏时的宽度。

总结

以上的情况都只考虑PC端的状态，如何设备小于最小宽度的话，应该考虑@media，给不同大小的设备定义不同的样式。