美文网首页前端修仙之路响应式
用rem编写移动端自适应网页

用rem编写移动端自适应网页

作者: 不染事非 | 来源:发表于2019-03-29 15:31 被阅读280次

    1.计算公式: 元素的宽度(或高度) / html元素(跟标签)的font-size = rem;
    2.举例 元素的宽度是 200px, html的font-size是100px, 那么元素宽度的rem大小 = 200/100 = 2rem

    移动端自适应网页的编写

    1.自适应: 当屏幕的像素变大的时候,字体和元素也响应变大
    2.什么是视口: 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域
    3.代码如下(简单一点)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <!-- 视口宽度与设备宽度一样 禁止用户缩放 -->
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <title>Document</title>
        <style>
                    // 当我们拖动网页或者刚改手机的时候,html的font-size会发生改变
            html {
                font-size: 100px;
            }
    
            body {
                font-size: 16px;
            }
    
            h1 {
                font-size: 0.12rem;
            }
            // 试试手机为ip6plus和ip5时,div的宽高各是多少(px)
            div {
                width: 1rem;
                height: 1rem;
                background: gray;
                line-height: 1rem;
            }
        </style>
    </head>
    
    <body>
        <script>
            //获取手机屏幕宽度
            function resetWidth() {
                // 兼容ie浏览器 document.body.clientWidth
                var baseWidth = document.documentElement.clientWidth || document.body.clientWidth;
                console.log(baseWidth);
                // 默认的设置是375px(ip6)的根元素设为100px, 其他的手机都相对这个进行调整
                document.documentElement.style.fontSize = baseWidth / 375 * 100 + 'px'
            }
            resetWidth();
            window.addEventListener('resize', function () {
                resetWidth();
            })
        </script>
        <div>
            内容
        </div>
    </body>
    
    </html>
    

    移动端屏幕适配

    淘宝做法:
    (function(doc){
        var baseSize=40;
        var baseWidth=640;
        var maxWidth=480;
        var lastWidth;
        var timeoutAdjust;
        var html=doc.getElementsByTagName("html")[0];
        var adjust=function(){
            var width=Math.min(html.offsetWidth,maxWidth);
            if(lastWidth!=width){
                html.style.fontSize=(baseSize/baseWidth*(lastWidth=width))+"px";
            }
        };
        addEventListener("resize",function(){
            adjust();
            clearTimeout(timeoutAdjust);
            timeoutAdjust=setTimeout(adjust,50);
        },false);
        adjust();
    }(document));
    
    普通做法:
    /* 设计稿是750,采用1:100的比例,font-size为100 * (docEl.clientWidth * dpr / 750) */
    var dpr, rem, scale;
    var docEl = document.documentElement;
    var fontEl = document.createElement('style');
    var metaEl = document.querySelector('meta[name="viewport"]');
    dpr = window.devicePixelRatio || 1;
    rem = 100 * (docEl.clientWidth * dpr / 750);
    scale = 1 / dpr;
    // 设置viewport,进行缩放,达到高清效果
    metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
    // 设置data-dpr属性,留作的css hack之用,解决图片模糊问题和1px细线问题
    docEl.setAttribute('data-dpr', dpr);
    // 动态写入样式
    docEl.firstElementChild.appendChild(fontEl);
    fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
    
    

    移动端显示1px的问题

    由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上的border:1px在Retina屏下会渲染成2px的边框,与设计稿有出入,为了追求1px精准还原,我们就不得不拿出一个完美的解决方案

    • 用小数来写px值
      IOS8下已经支持带小数的px值, media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样
    .border { border: 1px solid #999 }
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        .border { border: 0.5px solid #999 }
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
        .border { border: 0.333333px solid #999 }
    }
    
    • 缩放解决
    /* 设计稿是750,采用1:100的比例,font-size为100*(100vw/750) */
    .border-1px {
        position: relative;
    }
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        .border-1px:before {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 1px;
            border-top: 1px solid #D9D9D9;
            color: #D9D9D9;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
    }
    

    postcss-pxtorem 像素自动转换成rem
    1.安装postcss-pxtorem

    npm i postcss-pxtorem --save-dev
    

    2.打开项目根目录下的package.json,在postcss的plugins里添加下面的代码

    "postcss-pxtorem": {
            "rootValue": 100,
            "propList": [
              "*"
            ]
          }
    
    7177443-8aba0ea6137d5022.png

    相关文章

      网友评论

        本文标题:用rem编写移动端自适应网页

        本文链接:https://www.haomeiwen.com/subject/bxglbqtx.html