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>

mobile_适配_设备兼容

猜你喜欢