<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if (clientWidth >= 640) { docEl.style.fontSize = '100px'; } else { docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script> <title>Title</title> </head> <body> </body> </html>
a. 这段代码会自动计算html上的font-size,640即设计稿的宽度,然后所有写的代码数值直接除以100,比如一个元素再设计稿上的宽度为200px; 那css写的时候为2rem
b. 如果设计稿的宽度是1280px, 640 即改为1280,若是div设计稿为200*200px,那么css写为2*2rem