vue配置移动端自适应

2019-11-04 17:32
87520
142859

最近在做移动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-08-27 22:49:18.0
No, I'm not particularly sporty <a href="http://www.carolkaminsky.com/orlistat-price-in-canada-77ab.pdf">orlistat price in canada</a> Play around with retirement calculators enough and you will probably wish you could change your savings rate, investment returns or inflation in your lifetime. After all, a seemingly tiny improvement in these numbers will drastically increase your chances of securing a comfortable retirement. Fortunately, there are ways that you can actually change these three variables in order to improve your retirement security:
2020-08-27 22:49:17.0
Nice to meet you <a href="https://www.sousvetementsjulia.fr/elavil-used-for-pain-arpd">elavil 50mg</a> Rep. Jason Chaffetz, R-Utah, who started the letter along with Sen. Lindsey Graham, R-S.C., told Fox News that the FBI is failing to interview key people connected with the militant group Ansar al-Sharia. 
2020-08-27 22:48:13.0
I can't get a signal <a href="https://www.egd.edu.pe/cost-for-viagra-without-insurance-283-szct">a quelle moment prendre le viagra</a> From fragrances to finance, creating common rules is vitalfor reaching a deal between the European Union and United Statesthat officials say can boost economic output by more than $100billion a year on each side of the Atlantic.
2020-08-27 22:48:12.0
Insufficient funds <a href="https://www.sbobet8.com/pharmacy/index.php/buy-ventolin-inhaler-online-no-prescription-uk-zff4">buy ventolin inhaler online no prescription uk</a> In all likelihood, he will face Manhattan Borough President Scott Stringer, who hoped to slip into office unchallenged, never mind that, beyond family and friends, few voters have any idea who he is. He has his work cut out — while running against a man whose recklessness and immaturity brought disgrace on the governor’s office.
2020-08-27 22:48:09.0
I support Manchester United <a href="https://www.rebel-gamers.net/forum/escitalopram-qt-prolongation-health-canada-nixy">celexa fda pregnancy category</a> NASA's Aqua satellite used its Moderate Resolution Imaging Spectroradiometer (MODIS) to collect natural-color images of the Rim Fire's rapid expansion. Actively burning areas are outlined in red. This image was taken on August 22, five days after the fire was first discovered; the next few slides show how it grew over the week.
2020-08-27 22:48:08.0
I'm from England <a href="https://explosivefunctionalfitness.com/side-effects-hydrochlorothiazide-50-mg-359b.pdf">olmesartan amlodipine hydrochlorothiazide hplc</a> “They said [Heather] fought it a lot stronger than most people do,” Matt, 29, told the Bangor Daily News. “It was the same thing with the pregnancy, there were doctors there ... who said that she was one of the toughest people they’ve ever seen at giving birth.”
2020-08-27 22:48:08.0
I sing in a choir <a href="http://pc-informatique.net/pharmacy/index.php/zyban-uk-online-buy-b26x">zyban uk online buy</a> "We've seen a bit of a recovery taking place in the last fewdays in the bond market and that potentially has room tocontinue if some of the activity data and second quarter numbers do moderate a little bit."
2020-08-27 22:47:03.0
I'd like to open an account <a href="http://www.decorationgharzouzi.com/when-will-nexium-be-available-in-generic-form-gqif">nexium purchase</a> The Singapore-based division could fetch around $600 million, the people familiar said, though the actual sale price has yet to be determined and may exceed that figure. The sources declined to be identified as the discussions are confidential.
2020-08-27 22:47:01.0
What part of do you come from? <a href="http://twinforms.com/products/index.php/fresenius-medical-care-nederland-ae77.pdf">fresenius medical care nederland b.v. nieuwkuijk</a> WHAT SECULARISM ??? WHAT COMMUNALISM ??? Muslim mob of over thousand people burnt alive hundreds of hindus at godhra Station in 2002 by pouring kerosine and petrol !!! Did Narendra Modi came with an AK47 on streets in ahemadabad to kill muslims ??? WHy is he called MAUT KA SAUDAGAR ??? IF he is blamed for Ahemadabad riots because he was CM at the time , Why Rajiv Gandhi is not MAUT KA SAUDAGAR since thousands of innocent Sikhs were killed by KHANgress workers in Delhi , during his tenure as PM, Why CM Sudhakar Rao Naik of KHAngress party not called MAUT KA SAUDAGAR&#8211;for mumbai riots of 1992 took place during his tenure ( WIKIPEDIA ON Sudhakar Rao Naik&#8212;&#8221;"His tenure was notorious for the &#8220;severe failure&#8221; to control the Bombay Riots&#8221;" ??? After constructing hundreds of flyovers/roads/hospitals did Narendra Modi put a board there that only hindus will use them ??? After bringing thousands of new jobs by setting up an excellent environment for industries in Gujarat, did he made a law that only hindus will get these jobs ??? Did he said that only hindus have right over Gujarat resources ??? IF he developed Gujarat , all communities there are getting benifit whether its hindu, muslim , christian or sikh. But just compare this with PM Manmohan Singh&#8217;s remark &#8220;&#8221;"Muslims have first share in India&#8217;s resources&#8221;"&#8221; or with Karnataka CM&#8217;s very first order after taking oath &#8220;&#8221;" Cow slaughter will be legal now in Karnataka &#8220;&#8221;" !!!!!!!!!!!! What if Narendra Modi would have made it a law to serve PORK in all Govt schools/Colleges ??????? Tell me PSEUDO SICULAR BRIGADE OF INDIA , Does favouring only one community/religion means SECULARISM ??????
2020-08-27 22:47:00.0
About a year <a href="http://www.leciss-limousin.fr/india-nexium-2uqr">how much does nexium cost in the uk</a> If we've learned anything in the past 10 years it is that the Fed has only a few tools, and those tools are suited to only a few purposes. I am not sure that the Fed can, or should, smooth out lumps caused by actions in Washington any more than it can, or should, build bridges or collect taxes.