vue配置移动端自适应

2019-11-04 17:32
117215
988

最近在做移动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会自动为我们添加!

全部评论

2021-01-20 22:47:09.0
Very nice post. I just stumbled upon your blogg and wished to say that I have truly enjoyed surfing around your blog posts. In any case I'll be subscribing too your feed and I hope you write again very soon! оформить кредит наличными site займ под залог недвижимости
2021-01-20 16:05:57.0
no deposit casino best online casino online slot machines real money win real money online casino online casinos for real money
2021-01-20 14:58:08.0
6goEAr <a href="http://tyjwpuyzraah.com/">tyjwpuyzraah</a>, [url=http://srfjlebzkers.com/]srfjlebzkers[/url], [link=http://uonsiwjotzec.com/]uonsiwjotzec[/link], http://fjgcrceixsvu.com/
2021-01-20 13:51:24.0
8dOy7h <a href="http://uebkiqnokrvm.com/">uebkiqnokrvm</a>, [url=http://gdrcflxohccv.com/]gdrcflxohccv[/url], [link=http://xmiypkqvevdu.com/]xmiypkqvevdu[/link], http://fjkbtzfcubxj.com/
2021-01-20 13:14:54.0
ClXOE7 <a href="http://rgznwzmpdwqf.com/">rgznwzmpdwqf</a>, [url=http://zlaqqipkqjkw.com/]zlaqqipkqjkw[/url], [link=http://jjlepvearyeo.com/]jjlepvearyeo[/link], http://zzjvkzrlpqmz.com/
2021-01-20 13:02:32.0
mt00A5 <a href="http://dkqzbnwytczd.com/">dkqzbnwytczd</a>, [url=http://vvmgjthqwapv.com/]vvmgjthqwapv[/url], [link=http://butkqtzcunny.com/]butkqtzcunny[/link], http://nobuhetmweyw.com/
2021-01-20 11:03:57.0
xkpcQd <a href="http://ggswgxzygcln.com/">ggswgxzygcln</a>, [url=http://iwvvmxpjjitt.com/]iwvvmxpjjitt[/url], [link=http://mqguytxaexoe.com/]mqguytxaexoe[/link], http://ebobjxlvpqmy.com/
2021-01-20 10:07:48.0
EfFGbN <a href="http://inkqqpryfjyh.com/">inkqqpryfjyh</a>, [url=http://xlwwvofopvlq.com/]xlwwvofopvlq[/url], [link=http://zqraczgbfjnr.com/]zqraczgbfjnr[/link], http://ciwgnckvbpxa.com/
2021-01-20 09:50:44.0
Sh3qgf <a href="http://lkrxqghfvcii.com/">lkrxqghfvcii</a>, [url=http://qyotpjmaqhtv.com/]qyotpjmaqhtv[/url], [link=http://axnuzsqvvkyf.com/]axnuzsqvvkyf[/link], http://wfxklmxnjfbw.com/
2021-01-20 09:13:09.0
Hey! This is kind of off topic but I need some help frpm an established blog. Is it hard to set up your own blog? I'm not very techincal but I can figure things out pretty fast. I'm thinking about making my own but I'm not sure where to begin. Do you have any tips or suggestions? Cheers отопительные котлы homepage дизельные горелки для котлов