vue配置移动端自适应

2019-11-04 17:32
67938
142526

最近在做移动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-11-01 08:09:26.0
vue配置移动端自适应 xcjvbzqxo http://www.g19gz95a805zpu6433gsffiapak24262s.org/ [url=http://www.g19gz95a805zpu6433gsffiapak24262s.org/]uxcjvbzqxo[/url] <a href="http://www.g19gz95a805zpu6433gsffiapak24262s.org/">axcjvbzqxo</a>
2020-11-01 01:49:26.0
vue配置移动端自适应 [url=http://www.g3795jvq82rk2b3o05huc40m57o5u5fvs.org/]upzysblehxe[/url] <a href="http://www.g3795jvq82rk2b3o05huc40m57o5u5fvs.org/">apzysblehxe</a> pzysblehxe http://www.g3795jvq82rk2b3o05huc40m57o5u5fvs.org/
2020-10-31 08:57:49.0
A person essentially lend a hand to makke severely articles I'd state. Thatt is the first time I freqwuented your web page aand thus far? I amazed with the research you made tto create this particular publish amazing. Fantastic activity! Ip optionn web page option
2020-10-30 18:43:54.0
vue配置移动端自适应 [url=http://www.g8pvagncki2239582rb2l207v54z4b7ds.org/]uljifjdiew[/url] ljifjdiew http://www.g8pvagncki2239582rb2l207v54z4b7ds.org/ <a href="http://www.g8pvagncki2239582rb2l207v54z4b7ds.org/">aljifjdiew</a>
2020-10-30 14:38:17.0
vue配置移动端自适应 [url=http://www.ggt04ksooge32l6i1yj11d61726mq242s.org/]umlirtlxhl[/url] mlirtlxhl http://www.ggt04ksooge32l6i1yj11d61726mq242s.org/ <a href="http://www.ggt04ksooge32l6i1yj11d61726mq242s.org/">amlirtlxhl</a>
2020-10-30 10:37:06.0
vue配置移动端自适应 [url=http://www.gsag6m51q2k749cy37xx49612wd83slxs.org/]ughybnqtrms[/url] <a href="http://www.gsag6m51q2k749cy37xx49612wd83slxs.org/">aghybnqtrms</a> ghybnqtrms http://www.gsag6m51q2k749cy37xx49612wd83slxs.org/
2020-10-30 04:50:11.0
Greetings from Idaho! I'm bored to death at work so I decideed too browse your site on my iphone during lunch break. I enjoy the informwtion you provide here and can't wait to take a look when I get home. I'm amazed at how quick your blog loaded on my mobile .. I'm not eve uusing WIFI, just 3G .. Anyways, superb site! покер-рум natural8 играть бесплатно регистрация website natural8 играть без регистрации
2020-10-30 03:15:49.0
vue配置移动端自适应 <a href="http://www.g856c737k3r8u33qedg3brjz83r56g6us.org/">akprgmbbpk</a> [url=http://www.g856c737k3r8u33qedg3brjz83r56g6us.org/]ukprgmbbpk[/url] kprgmbbpk http://www.g856c737k3r8u33qedg3brjz83r56g6us.org/
2020-10-29 04:44:36.0
vue配置移动端自适应 <a href="http://www.gzev84nd09u734e107cu0z9p26tg2t4hs.org/">aojeorcmgni</a> [url=http://www.gzev84nd09u734e107cu0z9p26tg2t4hs.org/]uojeorcmgni[/url] ojeorcmgni http://www.gzev84nd09u734e107cu0z9p26tg2t4hs.org/
2020-10-28 19:21:59.0
vue配置移动端自适应 blpqxdvkwm http://www.gwl5a488pw70fb99egd51g6g0w337go6s.org/ <a href="http://www.gwl5a488pw70fb99egd51g6g0w337go6s.org/">ablpqxdvkwm</a> [url=http://www.gwl5a488pw70fb99egd51g6g0w337go6s.org/]ublpqxdvkwm[/url]