Html5页面适配等比例自适应

html5 页面等比例自适应

使用rem单位，默认情况下rem是默认字体的大小，即1rem=16px

我们修改html的font-size 来动态调节rem的大小。

一般的设计稿宽度大小为750px,或者640px;

而实际手机的逻辑分辨率一般为320px;（不是指他的物理分辨率）

注意：使用rem适配必须首先设定meta标签,设定viewport的大小就是设备宽度

<meta name="viewport" content="width=device-width, initial-scale=1.0">

可使用如下代码获得屏幕的信息；

var msg=
[
    "逻辑分辨率"+window.screen.width,
    "设备像素比"+window.devicePixelRatio,
    "物理分辨率"+window.screen.width*window.devicePixelRatio
];
alert(msg.join("\n"))

理想状态

假设我们的设计稿是750px; 用户手机的逻辑分辨率也是750px

那么只需要按照设计稿的像素大小，写死就可以完美呈现在750px的手机上。

但是用户的手机像素是多样的，所以我们应该将px单位转化为rem单位，同时根据用户手机分辨率来调节rem的实际值大小

需要保证在750px的用户手机下 rem 的值正好等于设计稿上的像素值，这需要我们根据用户屏幕的分辨率来动态调节html font-size的大小。

举个例子

在750px的设计稿里，一个按钮的宽是 280px, 其html的font-size未做修改，是16px

640  320px
80px  40px (目标手机尺寸*元素设计大小/设计稿宽)
5rem  5rem
16px   x  (x = ) (目标手机尺寸*元素设计大小/设计稿宽)/5
需要 rem 的值不变，保持实际的元素大小
x 的值应为  (目标手机尺寸*元素设计大小/设计稿宽)/5

x 为 8

我们修改在640下 font-size 为100， 这样UI的像素/100 可轻易转化为rem
640      320
80px     40px
0.8rem   0.8rem
100px    50px ( 与分辨率关联就是 320*(100/640) )

我们希望元素的设计大小（px）能轻易的转换为rem单位，故我们设计系数100

(目标手机尺寸*元素设计大小*100/设计稿宽)/17.5

适配代码可以总结如下

(function()
{
    var app =
    {
        init:function(uiwidth)
        {
            window.onresize = r;
            function r(resizeNum) {
                var winW = window.innerWidth;
                document.getElementsByTagName("html")[0].style.fontSize = winW * (100/uiwidth) + "px";
                if (winW > window.screen.width && resizeNum <= 10) {
                    setTimeout(function() {
                        r(++resizeNum);
                    }, 100);
                } else {
                    document.getElementsByTagName("body")[0].style.opacity = 1;
                }
            }
            setTimeout(function() {
                r(0);
            }, 100);
        }
    };
    app.init(750);
})();