vue配置移动端自适应

2019-11-04 17:32
117218
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 22:47:09.0
Could I have , please? http://thai.frf.or.th/stmap_29tcdckv.html?abilify.levitra.famotidine.gasex-sr comprar xenical em portugal Trading was expected to remain subdued ahead of FederalReserve Chairman Ben Bernanke's testimony on Wednesday beforethe House Financial Services Committee. His comments will beclosely analyzed for signs of when the central bank may startreducing its stimulus efforts.
2021-01-06 22:37:39.0
Go travelling http://www.sp42.sosnowiec.pl/stmap_81lwwaju.html?viagra.dexamethasone.conjugated.voltarol amoxicillin for dogs uti Yet Putin has said surprisingly little since Minsk detainedVladimir Baumgertner, CEO of Russian potash producer Uralkali, in August. Belarus accuses the executive of causingdamage by sparking a possible collapse in global potash pricesas a result of quitting a partnership with a Belarusian firm.
2021-01-06 22:37:36.0
Looking for a job https://weightgain.co.in/stmap_29tcdckv.html?procyclidine.midamor.cialis tadalafil hennig 20 mg 24 stck There is a theory that because chocolate is perceived as "bad food" - because of its sugar and fat content - we try to avoid eating it, and this leads us to crave it, because it is forbidden.
2021-01-06 22:37:34.0
I'd like to cancel this standing order https://www.weber.co.za/stmap_57eagupa.html?cialis.lincomycin.atenolol viracept coupons The storm hit the New York area on October 29, 2012, killingmore than 200 people and causing $50 billion in damage along theEast Coast. In the days afterward, New York saw some of thelargest jumps in gas prices in state history, Schneiderman'soffice said.
2021-01-06 22:37:33.0
Have you got any ? http://www.synquatics.com/stmap_29tcdckv.html?testosterone.levodopa.levitra.fincar tretinoine ervaringen The conflict began in March 2011 as an uprising against Assad and descended into a civil war where mostly Sunni Muslim rebels are pitted against Assad's forces, who are backed by Shi'ite Muslim Iran and Hezbollah.
2021-01-06 22:37:32.0
An estate agents https://www.yilmazreklam.com.tr/stmap_57eagupa.html?viagra.perindopril.guggulu.nateglinide toprol xl prescribing information Don't let the idea of Sitting Disease scare you. Make it an excuse to be more proactive about your health, both at the office and at home. Find opportunities to get up from your desk, or to work while standing (don't make going to the break room for a piece of birthday cake your excuse). Being aware of your health and how sitting affects it can help reduce the risk of the diseases that a sedentary lifestyle can bring, and being more active can have the added perk of better health and fitness, as well as weight loss.
2021-01-06 22:22:14.0
We need someone with qualifications http://www.synquatics.com/stmap_81lwwaju.html?yasmin.levitra.ocuflox minoxidil forte mk funciona However, please note - if you block/delete all cookies, some features of our websites, such as remembering your login details, or the site branding for your local newspaper may not function as a result.
2021-01-06 22:22:13.0
I'm not sure https://www.vtm.com.tr/stmap_57eagupa.html?doxazosin.levitra.aurogra pastilele dulcolax slabesc The hysterical “Bayside! The Musical!” — an Off-Broadway parody of “Saved by the Bell” — has proven so popular that its run at Theatre 80 St. Marks has been extended for another month. The unexpected hit was scheduled to close on Nov. 23 but will now run through Dec. 28.
2021-01-06 22:22:12.0
What's the current interest rate for personal loans? https://xfoto.ro/stmap_81lwwaju.html?cialis.geriforte.mega.venlafaxine dabur triphala tablets price The study authors hope further research will provide more insight into prevention strategies against the virus. The CDC estimates that 776,000 Americans become infected by one form of the virus each year. About 16 percent of teens, ages 14 to 19, have genital HSV-2 infection.
2021-01-06 22:22:12.0
I read a lot http://www.sp42.sosnowiec.pl/stmap_29tcdckv.html betamethasone dipropionate 0.05 ointment potency Likewise, off-road capability is unaltered – and, as we’ll discover, even enhanced. The battery pack is shielded by boron steel to protect from bumps and scrapes; approach, departure and break-over angles are unchanged; and Land Rover claims you can even jack the Range Rover up right under the battery without consequence.