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

关于 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 单位，同时两边留白，随着屏幕变小两侧留白也减少，设置的最小屏幕宽度应该等于网页满屏时的宽度。