html 移动端 两种布局,移动端rem布局的两种实现方法

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

方法一：常用方法，css媒体查询

@media only screen and (max-width: 600px), only screen and (max-device-width:400px) {

html,body {

font-size:50px;

}

}

@media only screen and (max-width: 500px), only screen and (max-device-width:400px) {

html,body {

font-size:40px;

}

}

@media only screen and (max-width: 400px), only screen and (max-device-width:300px) {

html,body {

font-size:30px;

}

}

.box{

border: 1rem solid #000;

font-size: 1rem;

}

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

方法二：引入js

// 需求：根据设计图的比例去动态设置不同屏幕下面对应的font-size值

// 这段JS不要添加入口函数，并且引用的时候放到最前面

// ui的大小根据自己的需求去改

// 设计图的宽度

var ui = 750;

// 自己设定的font值

var font = 40;

// 得到比例值

var ratio = ui/font;

var oHtml = document.documentElement;

var screenWidth = oHtml.offsetWidth;

// 初始的时候调用一次

getSize();

window.addEventListener('resize', getSize);

// 在resize的时候动态设置fontsize值

function getSize(){

screenWidth = oHtml.offsetWidth;

// 限制区间

if(screenWidth <= 320){

screenWidth = 320;

}else if(screenWidth >= ui){

screenWidth = ui;

}

oHtml.style.fontSize = screenWidth/ratio + 'px';

}

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