首页 > 代码库 > 移动端响应式布局+rem+calc()

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

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>

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