社会不会来适应你，如果你没有提前准备（自适应），那么你就要积极学习（响应式），适应这个不断变化的世界。
<< 移动端和pc端的页面都是怎么适配的？
>> 自适应：通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面（好几套）
响应式布局：根据屏幕大小变化，页面的内容排版布局会自动调整变动。（一套）
// rem
rem（font size of the root element）是指相对于根元素<html>来做计算的字体大小单位。
html { font-size: 75px }
1rem = 75px
4rem = 300px
// vw
vw是基于viewport视窗的长度单位。1vw等于window.innerWidth的1%
设备物理宽度为375px时，1vw = 3.75px
// 百分比
// dpr 是什么
设备像素比device pixel ratio简称dpr，即物理像素和设备独立像素的比值。
想象一下，我们的屏幕像素是375，应该有375列小灯泡，但现在有750个小灯泡（物理像素），每两个小灯泡显示一个像素，那么dpr就是2。
// 1px问题
// 当我们使用rem作为单位时，假设2dpr的屏幕要展示1px高度的border，转化为px就是0.5
// 但浏览器对0.5对解释不一样
chrome：把小于0.5px的当成0，大于等于0.5px的当作1px
firefox：会把大于等于0.55px的当作1px
safiri:把大于等于0.75px的当作1px
// 解决方法 transform的scale
几种方案
// Flexible（前手淘做法，不建议使用）
// 使用插件postcss-px-to-viewport 可以选择输出vw和rem（使用这个就够了）
'postcss-px-to-viewport': {
unitToConvert: 'px', // 需要转换的单位，默认为"px"
viewportWidth: 375, // 视窗的宽度，对应设计稿的宽度
viewportUnit: 'vw', // 指定需要转
fontViewportUnit: 'vw', // 字体使用的视口单位
unitPrecision: 13 // 指定`px`转换为视窗单位值的小数后 x位数
...
}
html {
font-size: 26.6666666666666667vw;
margin: 0 auto;
body {
// 重置字体大小
font-size: 0.14rem;
}
}
@media screen and (min-width: 768px) {
html {
font-size: 9vw;
max-width: 768px;
}
}
参考：
