vue配置移动端自适应

2019-11-04 17:32
117279
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-06 23:08:31.0
Can I call you back? https://yourpreferredtours.com/stmap_57eagupa.html?imipramine.viagra.mastigra.bimatoprost pepcid vs prilosec vs nexium The official sub-index for employment was at 49.1, below 50 for a 14th month though up from June’s 48.7. HSBC, meanwhile, said the rate of job losses in manufacturing was the fastest since March 2009.
2021-01-06 23:08:30.0
Have you got a telephone directory? https://xfoto.ro/stmap_57eagupa.html?prozac.furacin.imitrex.viagra voltaren inyeccion para q sirve Though the Navy has yet to release the identities of the four, two are expected to be Senior Chief Navy Diver (MDV) James Burger and Chief Warrant Officer 3 Mark Smith, the leaders of the Little Creek-based MDSU detachment, a source close to the case confirmed.
2021-01-06 23:08:30.0
I'm a trainee http://www.stemalliansen.no/stmap_81lwwaju.html?chlorzoxazone.procardia.levitra.epivir where can i buy voltaren osteo gel Under the state law that created the emergency managerposition, Detroit could not file for bankruptcy without thegovernor's approval. Lawsuits by pension funds and city workers,filed earlier this month, had sought to prevent a filing. But on Thursday, Orr filed the bankruptcy petition, with Snyder'spermission, just minutes before Judge Aquilina was set to ruleon a petition to stop the process.
2021-01-06 23:08:27.0
Whereabouts in are you from? http://xewt12.com/stmap_81lwwaju.html?manforce.cialis.apcalis.enalapril can you mix amoxicillin with children's tylenol She added: "Everyone with diabetes should expect excellent care from the NHS. That is why we have introduced an incentive scheme to ensure that every child has the best care possible. We have also established regional networks to share expertise in children's diabetes care across the NHS."  
2021-01-06 22:52:45.0
I can't get a signal https://www.wai-not.org/stmap_81lwwaju.html?viagra.avanafil.ponstel.super glycomet sr 1mg The latest revelation underscores the hurdles facing TokyoElectric Power (TEPCO) 2-1/2 years after a massiveearthquake and tsunami destroyed the Fukushima plant, triggeringthe world's worst nuclear disaster since Chernobyl.
2021-01-06 22:52:44.0
I'm on a course at the moment https://www.vtm.com.tr/stmap_29tcdckv.html?cystone.neggram.viagra.fluoxetine pamelor 10mg para que serve "These three scientists had the grit to pick 'impossible' projects and the courage to remain steadfast in the face of failure and criticism," Gerard O’Donoghue of the National Institute for Health Research in England wrote in an article for the New England Journal of Medicine. "Above all, they remained incurably passionate about achieving victory over one of humanity’s most prevalent disabilities."
2021-01-06 22:47:13.0
Lost credit card https://premiumparts-global.com/stmap_81lwwaju.html?clomid.levitra.sildalis actra sx donde comprarlo The 6-foot-2, 311-pound guard from North Carolina missed the first two days of training camp, when the team worked out in shorts. He was en route to Arizona and also missed Sunday's practice, the team's first in pads. He was expected to practice Monday.
2021-01-06 22:47:11.0
What's your number? https://xiaomiworld.vn/stmap_57eagupa.html?clonidine.viagra.alavert sandoz-montelukast definition Conversely, and for that very reason, there are those who believe that the level of tension that has now been reached may force the unblocking of the process to find a political settlement of the crisis.
2021-01-06 22:47:10.0
I'm interested in this position http://zolisports.com/stmap_81lwwaju.html?erexin-v.viagra.combivent.irbesartan yasminiq precio per "If all the cases that come after this one adhere loosely to the legal requirements articulated in this decision," Scheer said, "then those trials will be infinitely more open and transparent than otherwise would have been the case."
2021-01-06 22:47:09.0
Do you know what extension he's on? https://nazzalbros.com/stmap_57eagupa.html?tylenol.cialis.tulasi.nitrofurantoin nitroxine Even at a conservative estimate, that is more than thecompany's $5.4 billion market capitalization, although analystssay the smartphones that bear its name have little or no valueand it might cost $2 billion to shut the unit that makes them.