前言
- 话不多说，干货为主。
- 本文能让初学者一步解决适配问题
第一步（font-size）
- 此步骤主要是设定font-size的大小
- 此方案是把屏幕宽度设置为3.75rem
- font-size根据屏幕的宽度变化而变化
(function() {var width = window.innerWidth / 375 * 100; //换算1rem的宽度document.documentElement.style.fontSize = width + "px";//fontSize的大小
})()- 一般UI图的宽度为375px（iphone 6的屏幕宽度）
- 假如设计图上的宽度是200px，则你在写css就可以写为2rem
第二步（防止低版本浏览器识别不准）
- 有些低版本浏览器（最典型的就是vivo手机，内置的浏览器内核特别低，一般不能准确识别到宽度。
html部分
<div class="wrap"><div class="rems"></div>
</div>css部分
*{padding: 0;margin: 0;
}
html,body{width: 100%;
}
.rems{width: 1rem;height: 1px;z-index: -100;
}
.wrap{width: 100%;}js部分
function remAgain() {var width = window.innerWidth / 375 * 100;document.documentElement.style.fontSize = width + "px";var rems = document.getElementsByClassName("rems")[0];if(rems.clientWidth != width && window.innerWidth != 0) {document.documentElement.style.fontSize = width / (rems.clientWidth / width) + "px";}
}
window.onload=function () {setTimeout(function () {remAgain();},0)
}总结
- 以上2步就可以完美解决移动端适配问题
- 下面是完整代码
-
<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache, must-revalidate"><meta http-equiv="expires" content="0"><script type="text/javascript">(function() {var width = window.innerWidth / 375 * 100;document.documentElement.style.fontSize = width + "px";})()</script><style type="text/css">*{padding: 0;margin: 0;}html,body{width: 100%;}.rems{width: 1rem;height: 1px;z-index: -100;}.wrap{width: 100%;}</style></head><body><div class="wrap"><div class="rems"></div></div></body><script type="text/javascript">//计算rem (兼容识别rem不准问题)function remAgain() {var width = window.innerWidth / 375 * 100;document.documentElement.style.fontSize = width + "px";var rems = document.getElementsByClassName("rems")[0];if(rems.clientWidth != width && window.innerWidth != 0) {document.documentElement.style.fontSize = width / (rems.clientWidth / width) + "px";}}window.onload=function () {setTimeout(function () {remAgain();},0)}</script> </html>