web 移动端适配

时间 2019-11-18

标签 web 移动适配栏目 HTML 繁體版

原文原文链接

设置viewport为设备宽度（这里不必定，但目前先这样足矣）javascript
将viewport分红10rem，并计算出1rem在当前浏览器的像素值，把它赋予html标签的font-size（分红10rem只是为了方便计算而已）css
写CSS代码时，遇到要适配的地方，好比width，margin，padding等，就不要再用px了，改为用remhtml

JS和Html代码以下：java

<!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代码作了相似以下的修改：浏览器

web 移动端 适配

web 移动端适配