-
设置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代码做了类似如下的修改: