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>