vw 实现移动端适配

如何在Vue项目中使用vw实现移动端适配

原文-vw

1. 运行js 判定 适配手机的dpr

if (!dpr && !scale) {
        var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) { // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else { // 其他设备下，仍旧使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
    }

2. flexible实际上就是能过JS来动态改写meta标签

var metaEl = doc.createElement('meta');
    var scale = isRetina ? 0.5:1;
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    if (docEl.firstElementChild) {
        document.documentElement.firstElementChild.appendChild(metaEl);
    } else {
        var wrap = doc.createElement('div');
        wrap.appendChild(metaEl);
        documen.write(wrap.innerHTML);
    }

3.将px 转换成 rem sass函数 统一转化 PostCSS(px2rem)

//npm install postcss-loader
    module.exports = {
        module: {
            loaders: [
                {
                    test: /\.css$/,
                    loader: "style-loader!css-loader!postcss-loader"
                }
            ]
        },
        postcss: function() {
            return [px2rem({remUnit: 75})];
        }
    }

4. sass 混合函数处理

@mixin font-dpr($font-size){
    font-size: $font-size;
    [data-dpr="2"] & {
        font-size: $font-size * 2;
}
    [data-dpr="3"] & {
        font-size: $font-size * 3;
}
}

@include font-dpr(16px);

原理

1. 使用vw来实现页面的适配，并且通过PostCSS的插件postcss-px-to-viewport把px转换成vw。这样的好处是，我们在撸码的时候，不需要进行任何的计算，你只需要根据设计图写px单位
2. 为了更好的实现长宽比，特别是针对于img、vedio和iframe元素，通过PostCSS插件postcss-aspect-ratio-mini来实现，在实际使用中，只需要把对应的宽和高写进去即可
3. 为了解决1px的问题，使用PostCSS插件postcss-write-svg,自动生成border-image或者background-image的图片

scss

.selector {
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd;
    /*no*/
}
.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}

赏

1分也是爱

微信