程序员前端笔记让前端飞

网页移动端适配动态修改页面font-size

2018-12-21  本文已影响6人  菜菜___

在做移动端的项目时,适配是第一步,最开始写移动端网页的时候学习Bootstrap响应式设计的做法,使用media标签写适配来改变font-size,于是便会有下面这种代码:

@media (max-width:992px){
    body,html{
        font-size:15px;
    }
}
@media (max-width:767px){
    body,html{
        font-size:20px;
    }
}
@media (max-width:414px){
    body,html{
        font-size:18px;
    }
}
@media (max-width:360px){
    body,html{
        font-size:16px;
    }
}

市场上各种屏幕的分辨率远不止这几个,所以这样写一方面是工作量很大很机械,另一方面是不够准确,但是media查询这种处理方式在处理PC端兼容移动端的时候还是很乐观的,有的小型网站为了节省成本便于维护就是采用的bootstrap这种做法,一个网页在pc端可能横排显示六个,但到了移动端就显示三个,这样更加美观,而如果直接修改body的font-size便是整体扩大或缩小,就达不到一套布局两种显示的效果。

如果是单纯只在移动端显示的页面,那么我们 动态修改页面body的font-size值 是最好的处理方法,目前淘宝移动端也是这么处理的。
在样式表里,我们设置width,font-size,border-width等一切以px为单位的属性,只需要按照设计稿标注的大小然后除以我们自定义的基数便好,为了换算方便,我习惯定义基数为100(下面js里设置的100),那么假设一个元素在设计稿标注上宽是200px,那么我们写width:2rem就OK(200/100=2)。下面是处理的步骤:

1.在页面引入"viewport"属性,这些属性可根据自己的需要修改

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

2.在<head></head>标签里引入动态修改font-size的代码,此段需要优先加载,以免页面布局错乱

<script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        /*设置一个屏幕最大宽度临界值,当大于这个宽度时,字体也不放大了*/
                        if(clientWidth>=640){
                            docEl.style.fontSize = '85px';
                        }else{
                            /*750是设计稿的宽度,100是基数为了方便换算,也可以为20,或者浏览器默认值16(px)*/
                            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                        }
                    };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);

    </script>

最后效果图长这样:



附上效果图的源代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>移动端适配动态修改页面font-size</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .news-list > h4 {
            padding: .3rem .2rem;
            font-size: .32rem;
            border-bottom: 1px solid #d2d2d2;
        }
         .news-list ul li{
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            margin-left: .2rem;
            padding: .45rem .3rem .45rem 0;
            border-bottom: 1px solid #d2d2d2;
            font-size: .3rem;
            color: #4e4e4e;
        }
         .news-list ul li .left{
            margin-right: .4rem;
        }
         .news-list ul li .left span{
            display: block;
            width: 1.8rem;
            height: 1.2rem;
            background-color: #d2d2d2;
        }
         .news-list ul li .right{
            width: 100%;
        }
         .news-list ul li .right h4{
            font-weight: normal;
            margin-top: -.1rem;
            margin-bottom: .12rem;
        }
         .news-list ul li .right div{
             display: -webkit-box;
             display: -ms-flexbox;
             display: -webkit-flex;
             display: flex;
             justify-content: space-between;
        }
         .news-list ul li .right div span{
            display: inline-block;
            font-size: .24rem;
        }
         .news-list ul li .right div span:first-of-type{
            padding: .02rem .04rem;
            background-color: #4a6efc;
            color: #fff;
        }
    </style>
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        if(clientWidth>=640){
                            docEl.style.fontSize = '85px';
                        }else{
                            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                        }
                    };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);

    </script>
</head>
<body>
<div class="news-list">
    <h4>新闻列表</h4>
    <ul id="newsList" page="2">
        <li class="flex">
            <div class="left">
                <span></span>
            </div>
            <div class="right">
                <h4>德国iPhone禁售令的最新相关信息</h4>
                <div class="flex">
                    <span>今日热点</span>
                    <span>2018-12-21</span>
                </div>
            </div>
        </li>
        <li class="flex">
            <div class="left">
                <span></span>
            </div>
            <div class="right">
                <h4>RNG战胜EDG的最新相关信息RNG战胜EDG是怎么回事</h4>
                <div class="flex">
                    <span>今日热点</span>
                    <span>2018-12-21</span>
                </div>
            </div>
        </li>
        <li class="flex">
            <div class="left">
                <span></span>
            </div>
            <div class="right">
                <h4>德国iPhone禁售令的最新相关信息</h4>
                <div class="flex">
                    <span>今日热点</span>
                    <span>2018-12-21</span>
                </div>
            </div>
        </li>
        <li class="flex">
            <div class="left">
                <span></span>
            </div>
            <div class="right">
                <h4>RNG战胜EDG的最新相关信息RNG战胜EDG是怎么回事</h4>
                <div class="flex">
                    <span>今日热点</span>
                    <span>2018-12-21</span>
                </div>
            </div>
        </li>
        <li class="flex">
            <div class="left">
                <span></span>
            </div>
            <div class="right">
                <h4>德国iPhone禁售令的最新相关信息</h4>
                <div class="flex">
                    <span>今日热点</span>
                    <span>2018-12-21</span>
                </div>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

移动端适配的方案有很多,下面是几篇讲解得很详细的博客,欢迎大家参考:
https://blog.csdn.net/ws379374000/article/details/78686101
https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
原文作者技术博客:https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚,爱阅读,爱交友,将工作中遇到的问题记录在这里,希望给每一个看到的你能带来一点帮助。
欢迎留言交流。

上一篇下一篇

猜你喜欢

热点阅读