今天小编跟大家讲解下有关移动端rem布局的两种实现方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关移动端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; [email protected] only screen and (max-width: 500px), only screen and (max-device-width:400px) { html,body { font-size:40px; [email protected] 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的方法 面对不同尺寸的移动端设备 都能实现文字大小等尺寸的细微变化。
来源：爱蒂网
