首页 > > 网页制作 > css >

移动端rem布局

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

　　据了解，现在有两种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 }