移动端rem布局

2018-06-24 02:09:13来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

  据了解,现在有两种rem布局的样式控制,其中一种是通过css的媒体查询,另外一种是通过引入js来控制,这两种方法各有各的优点,但是我还是喜欢用引入js的方法来实现rem布局,尽管现在市面上大多数都在使用css媒体查询的方式实现,在此我就将这两种方法做一总结:

方法一:常用方法,css媒体查询

 1 @media only screen and (max-width: 600px), only screen and (max-device-width:400px) {
 2   html,body {
 3     font-size:50px;
 4   }
 5 }
 6 @media only screen and (max-width: 500px), only screen and (max-device-width:400px) {
 7   html,body {
 8     font-size:40px;
 9   }
10 }
11 @media only screen and (max-width: 400px), only screen and (max-device-width:300px) {
12   html,body {
13     font-size:30px;
14   }
15 }
16 .box{
17   border: 1rem solid #000;
18   font-size: 1rem;
19 }

  对于这种方法而言,他仅仅通过css文件就可以实现,在加载页面的过程中,请求的文件较少,但是如果使用的两个移动端设备屏幕宽度相差不大,都在媒体查询所设置的同一区间,那么页面中的文字大小等不会变化,可是使用引入js的方法就不一样了。

方法二:引入js

 1 // 需求:根据设计图的比例去动态设置不同屏幕下面对应的font-size值
 2 // 这段JS不要添加入口函数,并且引用的时候放到最前面
 3 // ui的大小根据自己的需求去改
 4 
 5 // 设计图的宽度
 6 var ui = 750;
 7 // 自己设定的font值
 8 var font = 40;
 9 // 得到比例值
10 var ratio = ui/font;
11 var oHtml = document.documentElement;
12 var screenWidth = oHtml.offsetWidth;
13 // 初始的时候调用一次
14 getSize();
15 
16 window.addEventListener('resize', getSize);
17 // 在resize的时候动态设置fontsize值
18 function getSize(){
19   screenWidth = oHtml.offsetWidth;
20   // 限制区间
21   if(screenWidth <= 320){
22     screenWidth = 320;
23   }else if(screenWidth >= ui){
24     screenWidth = ui;
25   }
26   oHtml.style.fontSize = screenWidth/ratio + 'px';
27 }

这种通过引入js的方法,面对不同尺寸的移动端设备,都能实现文字大小等尺寸的细微变化。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Web前端体系的脉络结构

下一篇:前端程序员容易忽视的一些基础知识