移动端适配的解决方法？

 

移动端适配的解决方法：

 

方法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：若有不合适的表达，欢迎指出问题所在，谢谢！