vue配置移动端自适应

2019-11-04 17:32
773
1

最近在做移动H5开发,屏幕开始使用px做适配,不太好用,现在改为rem,各种百度做了自适应匹配,教程如下!勿喷、勿喷,各位觉得哪里不合适需要改进给我留言哦!

1、安装flexible

命令:cnpm install lib-flexible --save

2、安装px2rem-loader

命令:cnpm install px2rem-loader --save-dev

3、main.js中引入flexible

import 'lib-flexible'

4、配置px2rem-loader,打开build/utils.js,如下配置:

const cssLoader = {
    loader: 'css-loader',
    options: {
        sourceMap: options.sourceMap,
        importLoaders: 2
    }
};

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
        remUnit: 75
    }
};

// generate loader string to be used with extract text plugin
function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader];
    
    if (loader) {
        loaders.push({
            loader: loader + '-loader',
            options: Object.assign({}, loaderOptions, {
                sourceMap: options.sourceMap
            })
        })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
        return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader',
            publicPath: '../../'
        })
    } else {
        return ['vue-style-loader'].concat(loaders)
    }
}

5、不能在index.html的头部加 name 为 viewport 的 meta 标签(否则字体大小会固定为12px),flexible会自动为我们添加!

全部评论

2020-06-29 04:41:14.0
Prix Viagra 50 100 Mg https://bbuycialisss.com/ - Buy Cialis Acheter Du Ciprofloxacin En Suisse <a href=https://bbuycialisss.com/#>Cialis</a> order generic worldwide isotretinoin 10mg tablet usa