web 移动端 适配
-
设置viewport为设备宽度（这里不一定，但目前先这样足矣）
-
将viewport分成10rem，并计算出1rem在当前浏览器的像素值，把它赋予html标签的font-size（分成10rem只是为了方便计算而已）
-
写CSS代码时，遇到要适配的地方，比如width，margin，padding等，就不要再用px了，改成用rem
JS和Html代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height">
<title>甲壳虫的爬坑之路</title>
<script type="text/javascript">
var cssEl = document.createElement('style');
document.documentElement.firstElementChild.appendChild(cssEl);
function setPxPerRem(){
var dpr = 1;
//把viewport分成10份的rem，html标签的font-size设置为1rem的大小;
var pxPerRem = document.documentElement.clientWidth * dpr / 10;
cssEl.innerHTML = 'html{font-size:' + pxPerRem + 'px!important;}';
}
setPxPerRem();
</script>
</head>
<body>
</body>
</html>CSS代码做了类似如下的修改：
