手机端适配新思路 vw

发布于 2024-11-30 05:32:46 字数 2492 浏览 3 评论 0

屏幕适配

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; /* 左右居中 */
  }
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

冰火雁神

暂无简介

0 文章
0 评论
24 人气
更多

推荐作者

佚名

文章 0 评论 0

qq_Nk4xk9

文章 0 评论 0

mabiao

文章 0 评论 0

~~

文章 0 评论 0

坤阳

文章 0 评论 0

增幅人气の奥

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文