自适应

文章目录

1. 1. rem
2. 2. vw
3. 3. @media min-width
4. 4. em / 百分比

之所以不用px，是因为1px在各个屏幕下所占的相对比例不一样；比如，小手机屏幕下100px占了30%横屏，而大手机屏幕下只占了10%；
这样需要寻找一种单位，使得在每种屏幕下，都是一样的比例，从而适配各种大小的屏幕。

rem

【参考资料】

<!-- 设置网页视窗宽度为设备宽度 width=device-width -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="https://cdn.jsdelivr.net/npm/amfe-flexible@2.2.1/index.min.js"></script>

// 设置htmlFontsize，其他地方再使用rem单位，则会相对屏幕宽度自适应
const html = document.documentElement
html.style.fontSize = html.clientWidth
/10 + 'px';

// 可搭配postcss-px2rem食用
// 1px转rem后不显示的问题，将px改成大写PX
// .postcssrc.js
module.exports = {
  plugins: [
    require('autoprefixer')(),
    require('postcss-px2rem')({
      remUnit: 75 // 设计图宽度/10
    })
  ]
}

vw

flexibel的rem方案其实就是vw (1rem = 10vw)，但是直接用vw的话兼容性不好（93%）

// 之所以不用vw而是vmin，是为了防止横屏字体突然变大
// vmin=min(vh,vw)
html.style.fontSize = 10vmin;

// 可搭配postcss-px-to-viewport食用
...

@media min-width

得兼容太多设备了

...

@media screen and (min-width: 320px) {
  html { font-size: 312.5%; }
}

@media screen and (min-width: 375px) {
  html { font-size: 366.2%; }
}


@media screen and (min-width: 480px) {
  html { font-size: 468.7%; }
}

...

em / 百分比

不好计算，em依赖父元素的font-size，这样就形成了层层依赖。。。