CSS自适应有哪些方案？

【问】CSS自适应有哪些方案？

【答】：除了less外，原生CSS自适应方案常用的有如下:

1. @media媒介查询：
   @media screen and (max-width: 300px) {
   body { font-size: 20px }
   }
2. rem，%，wh等动态单位 (如屏宽100px, 则以下运行结果都为width:20px)
   .div-box1 {width: 0.2rem} //根html设置font-size：100px
   .div-box2 {width: 20%} //直属父元素设置width：100px
   .div-box3 {width: 20vw} //以根html宽为100vw计算
3. calc、–var1等动态计算机制
   .div-box4 {width: calc(width: 100% - 20px)} //此处运算结果为比父元素小20px
   .div-box3 {width: var(–width20)} //设置:root {–width20: 20px}

【测试1】@media

【测试2】rem、vw

【测试3】calc、var