1. 程式人生 > >mobile_適配_裝置相容

mobile_適配_裝置相容

em  參照本身元素的 font-size

rem 參照 html 根元素 的 font-size

 

rem 適配(同一元素,在不同設定上,效果一樣)

  • 原理

頁面中的元素,統一 單位 rem

根元素字型大小 設定成 整個螢幕的寬(1 rem = 375px)

  • // 適配 (手寫 面試題)
                (function(){
                    /* 1. 建立 style 標籤 */
                    var styleNode = document.createElement("style");
    
                    
    /* 2. 給 style 標籤新增內容 (螢幕分份, 大多數公司 16 份) */ styleNode.innerHTML = "html {"+ "font-size:"+width/16+"px !important"+ "}"; /* IPhone 6 的 font-size: 23.4375px */ /* 3. 把 style 標籤追加到 head 標籤裡
    */ document.head.appendChild(styleNode); }());

 

 

viewport 適配

(讓 width=320px 的圖片,寬度上填滿 width 為 375px 的屏)

  • 原理:

讓 佈局視口 等於 設計圖紙的 width

  • 方案1

(width=320px 安卓不支援)

  • 方案2
  • (放大操作 initial-scale=375/320)
  • <head>
        <meta name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=yes" /> </head> <script type="text/javascript"> var clientWidth = document.documentElement.clientWidth; var targetWidth = 320; var scale = clientWidth/targetWidth; var metaNode = document.querySelector("meta[name='viewport']"); metaNode.content = "initial-scale="+scale+ ", user-scalable=no"; </script>

 

2

2

2

2

22

2

2

2

2

2

2

2

22

2