rem实例

来源：互联网发布：淘宝商城手机专卖店编辑：程序博客网时间：2024/06/09 18:59

<!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>rem实例</title>      <style type="text/css">          div {              margin: 0 0 10px;          }          .div0 {              width: 100px;              height: 100px;              font-size: 20px;              border: 1px solid green;          }          .div1 {              width: 1rem;              height: 1rem;              font-size: 0.2rem;              border: 1px solid green;          }          .div2 {              width: 2rem;              height: 2rem;              font-size: 0.4rem;              border: 1px solid green;          }      </style>      <script type="text/javascript">          //document.documentElement.style.fontSize = document.documentElement.clientWidth / 19.20 + 'px';          (function (doc, win) {              var docEl = doc.documentElement;              var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';             var recalc = function () {                  var clientWidth = docEl.clientWidth;                  if (!clientWidth) {                    return;                }                  docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';              };              if (!doc.addEventListener) {                return;             }            win.addEventListener(resizeEvt, recalc, false);              doc.addEventListener('DOMContentLoaded', recalc, false);          })(document, window);      </script>  </head>    <body>      <div class="div0">20px</div>      <div class="div1">0.2rem</div>        <div class="div2">0.4rem</div>  </body>    </html>

基于1920的设计图，我的电脑也是1920的

浏览器全屏时：

浏览器半屏时：

阅读全文

1 0