mobile_5 种常见适配_设备兼容

em 参照本身元素的 font-size

rem 参照 html 根元素的 font-size

1. rem 适配（同一元素，在不同设备上，效果一样）

适用情况：当页面大于独立像素375 时，或者页面元素很多时

原理

页面中的元素，统一单位 rem（字体使用 px 而不使用 rem）

根元素字体大小设置成整个屏幕的宽（1 rem = 375px），然后元素的 css 像素根据占据屏宽，使用 rem

// 适配 (手写 面试题)
            (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);
            }());

缺点：需换算元素占屏幕的 rem

2. viewport 适配

适用情况：当 ui 设计图小于独立像素 375时。避免换算，直接使用 css 像素单位 px

缺点：图片可能失真；打破完美布局视口。

原理：

让布局视口等于设计图纸的 width

方案1

（直接让meta 标签中 content 的布局视口 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>

3. 百分比适配

zepto 移动端实战项目。

适用情况：页面元素少。

4. 媒体选择器（响应式布局）

不同屏幕，自适应呈现出不同的布局。

5. 具体像素值

适用情况：当 ui 设计图未标明宽度，以及元素的具体位置时。

关键点：

结合媒体选择器在不同情况下，使用 2x 图和 3x 图（dpr=2时使用2x图，dpr=3时使用3x图）
元素不可直接使用 ui 设计图的标注px，必须问清楚 dpr 是多少，然后算出具体的 css 像素
- css 像素 = 物理像素 / dpr = 位图像素/dpr = 设计图px/dpr
- css 像素 = 128/2 = 64 比如 128px*128px 的图片的 css 像素应该是 64 px

posted @ 2018-11-25 18:14 耶梦加德阅读(375) 评论(0) 编辑收藏举报

刷新页面返回顶部

我即狂澜，且力不可挽

mobile_5 种常见适配_设备兼容

公告