移动屏幕适配

2015-10-16更新。

简介

移动屏幕适配是一个比较令人头疼的问题,这是我写的一个通过动态设置viewport的移动屏幕适配的工具函数,包括定宽和rem两种适配方法,目前在我自己的项目中用起来还不错,后续也会优化调整,github地址这里

说明

页面事先添加meta标签 <meta name="viewport" content="width=device-width, initial-scale=1" />,然后调用方法如fixViewport('fixed', 640)即可。

参数

  • type
    适配类型(可选值为’fixed’或’rem’)

  • width
    设计稿宽度(整数)

适配方法

可以选择以下两种方式进行屏幕适配:

  • 定宽
    原理:设定viewport的宽度为固定值(即传递的width值),并根据屏幕宽度和width值计算viewport缩放比例。
    实际开发在css中任何长度尺寸均使用px单位,大小设置为设计稿中原始尺寸值;
    字体单位使用em, body下直接子元素字体大小设置为设计稿中尺寸值 / 100;
    非直接子元素若其父元素未设置字体大小则与直接子元素相同,否则根据父元素字体大小计算其相对值。

  • rem:
    原理:根据设备dpr和屏幕宽度来计算viewport宽度,并根据设备dpr计算viewport缩放比例,然后在html标签中设置font-size的属性值。
    实际开发在css中任何长度尺寸均使用rem单位,大小设置为设计稿中尺寸值 / 100;
    字体单位使用em, body下直接子元素字体大小设置为设计稿中尺寸值 / 100;
    非直接子元素若其父元素未设置字体大小则与直接子元素相同,否则根据父元素字体大小计算其相对值。
    若需要1px物理像素的边框效果,则border的宽度不需要使用rem,设定为1px即可。

代码

/**
 * Created by GG on 15/7/29.
 *
 *  页面事先添加meta标签 <meta name="viewport" content="width=device-width, initial-scale=1" />
 *  参数:type(适配类型, 可选值为'fixed'或'rem');width(设计稿宽度,整数)
 *  可以选择以下两种情况适配:
 *  1. 定宽:原理是设定viewport的宽度为固定值(即传递的width值),并根据屏幕宽度和width值计算viewport缩放比例。
 *     实际开发在css中任何长度尺寸均使用px单位,大小设置为设计稿中原始尺寸值;
 *     字体单位使用em, body下直接子元素字体大小设置为设计稿中尺寸值 / 100;
 *     非直接子元素若其父元素未设置字体大小则与直接子元素相同,否则根据父元素字体大小计算其相对值。
 *  2. REM:原理是根据设备dpr和屏幕宽度来计算viewport宽度,并根据设备dpr计算viewport缩放比例,然后在html标签中设置font-size的属性值。
 *     实际开发在css中任何长度尺寸均使用rem单位,大小设置为设计稿中尺寸值 / 100;
 *     字体单位使用em, body下直接子元素字体大小设置为设计稿中尺寸值 / 100;
 *     非直接子元素若其父元素未设置字体大小则与直接子元素相同,否则根据父元素字体大小计算其相对值。
 *     若需要1px物理像素的边框效果,则border的宽度不需要使用rem,设定为1px即可。
 */

(function () {
    function fixViewport(type, designWidth) {
        var metaEl = document.querySelector('meta[name="viewport"]');
        //由于初始设置了viewport的width=device-width,所以此处docEl.clientWidth即是屏幕的设备宽度
        var clientWidth = document.documentElement.clientWidth;
        var width, scale;

        switch (type) {
            case 'fixed':
                width = designWidth;
                scale = clientWidth / designWidth;
                break;
            case 'rem':
                var dpr = window.devicePixelRatio || 1;
                width = clientWidth * dpr;
                scale = 1 / dpr;
                document.documentElement.style.fontSize = 100 * (clientWidth * dpr / designWidth) + "px";
                break;
        }
        metaEl.setAttribute('content', 'width=' + width + ',initial-scale=' + scale + ',maximum-scale=' + scale +
            ',minimum-scale=' + scale);

        //设置body的基准字体大小
        document.body.style.fontSize = 50 / scale + 'px';
    }

    fixViewport('rem', 640);
}());
    原文作者:gaaoge
    原文地址: https://segmentfault.com/a/1190000003027863
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞