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

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

最后编辑于：2019.05.05 14:16:24