据了解，现在有两种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 = ui){ screenWidth = ui; } oHtml.style.fontSize = screenWidth/ratio + 'px';}
登录后复制
这种通过引入js的方法，面对不同尺寸的移动端设备，都能实现文字大小等尺寸的细微变化。
相关推荐：
移动端页面开发适配 rem布局原理
手机页面rem布局_html/css_WEB-ITnose
JavaScript中rem布局在react中的应用_javascript技巧
以上就是两种移动端rem布局实现方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2900710.html
