页面自适应

        最近公司做的项目需要做到一屏展示,不能出现滚动条,至少在打开页面时不能出现滚动条,就这要求页面自适吟,而且不光是要页面布局需要做到自适吟调节,图片和字体也需要做到自适吟,现在我的实现方案是去掉所有的px ,用vw,wh,vmin(vm)代替。

         首先在布局方面用百分比布局,尽量不要用具体的大小,如:px,cm

        vw,wh,vmin(vm)三个是视口的单位 具体换算单位为:

                            1vw = 1/100 视口宽度

                           1vh = 1/100 视口高度

                          1vmin(vm) = 1/100 视口高度宽度中较小的一个

      例如:

 h1 {

                   font-size: 8vm;    //适用于IE

                   font-size: 8vmin;   //其他浏览器

                 }


如果视口的宽度是300mm,高度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100,因为高度比宽度要小,所以计算的时候相对于高度。


 

      

猜你喜欢

转载自blog.csdn.net/qq_41948398/article/details/80039365