手机端适配新思路 vw

Question

屏幕适配

Meta 中

<meta  content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

不加 initial-scale=1 是因为存在权重问题，这里加了 meta 后是不存在多倍屏，统一都是单倍屏了。

思路

100vw 是 viewport，可视区域的大小；

设计稿的宽度/2，一般设计稿的宽度是按照 iPhone6 来设计的，而 iPhone6 是双倍屏

假设设计稿尺寸为 750px，那么计算公式为：

(750/2)/100vw  //计算出来的值为 1vw = ?px

假定我们以 100px 作为 root 节点字体大小，主要是为了方便计算。

?vw *(1vw*px) = 100px

上面两个公式主要算出的是：首先计算出 1vw 等于多少 px，然后我们以 100px 为基准值，算出 100px 等于多少的 vw，最后我们在 html 根节点设置字体大小就好了

html {
  font-size: 26.66vw;
}
/*
  有一个宽度为 100px 的 div，字体大小为 20px
*/
div {
  width: 1rem; font-size: 0.2rem;
}

目前 vw，vh 支持程度都很好

Android 4.4 + ,IOS safari 9.3 +

如果不支持 vw，vh 我们只需要通过 js 动态的计算就好了

JS 计算

//document.documentElement.clientWidth
//window.innerWidth
function testStyle(style) { 
    var prefix = ['webkit', 'Moz', 'ms', 'o'], 
        i, 
        humpString = [], 
        htmlStyle = document.documentElement.style, 
        _toHumb = function (string) { 
            return string.replace(/-(\w)/g, function ($0, $1) { 
                return $1.toUpperCase();
            }); 
        }; 
 
        for (i in prefix){
            humpString.push(_toHumb(prefix[i] + '-' + style)); 
            humpString.push(_toHumb(style)); 
            for (i in humpString){
                if (humpString[i] in htmlStyle){
                    return true;
                }
            }
            return false; 
        }
}

if(!testStyle('vw')){
    function resize(){
        // device-width
        var clientWidth = (document.documentElement || document.body).clientWidth;
        var htmlDom = document.getElementsByTagName("html")[0];
        htmlDom.style.fontSize = 100 * (clientWidth / 640) + "px";
    }
    resize();
    window.addEventListener("resize", resize);
}

另一种思路是通过媒体查询来控制

/* 早期的 安卓 4.4 以下的手机尺寸不会很大，使用 hack 技术 */
@media screen and (max-width: 320px) {
  html {
    font-size: 100px; /* 给 html 默认的 font-size */
    font-size: 31.25vw; /* 万一 当前的安卓手机支持 vw 就用 vw 覆盖上面的 css 属性 */
  }
  body{
    width: 6.4rem; /* 设置 body 最大宽度 */
    margin: 0 auto; /* 左右居中 */
  }
}