淘宝flexible + rem
rem页面
<style> html { font-size: 100px; } div { /* 相对于 100px */ font-size: 1rem; } </style> <div> rem单位 </div>
flexible
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>版心布局</title> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"> <script> (function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; function setBodyFontSize() { if (document.body) { document.body.style.fontSize = 12 * dpr + "px"; } else { document.addEventListener("DOMContentLoaded", setBodyFontSize); } } setBodyFontSize(); function setRemUnit() { var rem = docEl.clientWidth / 10; docEl.style.fontSize = rem + "px"; } setRemUnit(); window.addEventListener("resize", setRemUnit); window.addEventListener("pageshow", function (e) { if (e.persisted) { setRemUnit(); } }); if (dpr >= 2) { var fakeBody = document.createElement("body"); var testElement = document.createElement("div"); testElement.style.border = ".5px solid transparent"; fakeBody.appendChild(testElement); docEl.appendChild(fakeBody); if (testElement.offsetHeight === 1) { docEl.classList.add("hairlines"); } docEl.removeChild(fakeBody); } })(window, document); </script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } </style> </head> <body> <div> </div> <script> window.onload = function () { setFont(); window.addEventListener("resize", function () { setFont(); }) function setFont() { var div = document.querySelector("div"); div.style.fontSize = document.querySelector("html").style.fontSize; div.innerHTML = "html的字体大小为" + document.querySelector("html").style.fontSize; } } </script> </body> </html>