移动端适配的解决方法？

 

移动端适配的解决方法：

 

方法1：

页面上写上如下meta标签，然后其他一切大小高宽以375px布局定死的值来写，px描述

<meta name="viewport" content="width=375,maximum-scale=4,user-scalable=no">

 

方法2：rem

//通过window.screen.width获取屏幕的宽度
var offWidth = window.screen.width / 30;
//这里用宽度/30表示1rem取得的px
document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px';
//把rem的值复制给顶级标签html的font-size

利用js根据屏幕宽度设置html根元素的font-size大小，然后所有的宽度、高度、边距、图片宽高都利用1rem=多少px大小进行转换成rem表示，这样在不同宽度的屏幕设备上，就会显示不同的高、间距及字体大小

 

ps：如有不合适的表达，欢迎指出问题所在，谢谢！

 

转载于:https://www.cnblogs.com/haimengqingyuan/p/8401037.html