移动端响应式布局+rem+calc()

Posted 2020-09-23 changYao

1.媒体查询：@media only screen and (max-width: ) {},在最初做pc端时，使用各种媒体查询，因为pc的屏幕分辨率总共就几种，不嫌麻烦的重复使用类名。有很大的缺陷就是UI给的设计稿宽度是一定的，在做响应式式凭借自己的感觉是一种超级不爽的美感纠结症。

2.百分比：百分比也是相当的麻烦，还要去各种计算，不是程序员该做的笨重事。

3.em：缺陷是父盒子的百分比。

自己探索了一条自己选择走的捷径，不用在担心宽度和高度不等比例适应，也不用担心在各分辨率下的布局会出现问题。

首先，我们需要了解rem，style中的calc会计算的属性，和vw新单位。这里自己去百度了解。但发现有坑，calc（）中的参数可以px和vw等混用，然而屡试不爽，放弃。           

　　　　　　<style>

　　　　　　　　html{

　　　　　　　　　　font-size:calc(50px * 100vw  /  640px); //设计稿宽为640px时，font-size为50px；然而发现并没有效果。所以修改如下：
　　　　　　　　}

　　　　　</style>

送上代码：<style>

　　　　　　　　html{

　　　　　　　　　　font-size:calc(100vw * 50 / 640); //设计稿宽为640px时，font-size为50px；当改变屏幕宽时，布局会自适应，无论宽高都会等比例响应。
　　　　　　　　}

　　　　　</style>