mobile_適配_裝置相容
阿新 • • 發佈:2018-11-25
em 參照本身元素的 font-size
rem 參照 html 根元素 的 font-size
rem 適配(同一元素,在不同設定上,效果一樣)
- 原理
頁面中的元素,統一 單位 rem
根元素字型大小 設定成 整個螢幕的寬(1 rem = 375px)
-
// 適配 (手寫 面試題) (function(){ /* 1. 建立 style 標籤 */ var styleNode = document.createElement("style");
viewport 適配
(讓 width=320px 的圖片,寬度上填滿 width 為 375px 的屏)
- 原理:
讓 佈局視口 等於 設計圖紙的 width
- 方案1
(width=320px 安卓不支援)
- 方案2
- (放大操作 initial-scale=375/320)
-
<head> <meta name="viewport"
2
2
2
2
22
2
2
2
2
2
2
2
22
2