vue配置移动端自适应

2019-11-04 17:32
67120
142523

最近在做移动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-29 12:31:29.0
very best job <a href="http://urbanmission.co.uk/donde-comprar-ginseng-coreano-en-bogota">ginseng kapsl fiyat</a> But he quickly caught up by reading the book, watching Sandberg's 2010 famous talk to the TED group about women in leadership, and finally meeting with her at Facebook's headquarters in Menlo Park, California.
2020-08-29 12:24:52.0
I'd like to apply for this job <a href="http://www.corkdiscourse.com/buy-brestrogen-uk-zkie">buy brestrogen uk </a> Though Secretary of State John Kerry traveled back to Washington, D.C., from Boston, where he was at the side of his ill wife Teresa Heinz Kerry, to open a dialogue conference between U.S. and Chinese leaders,  it was clear that his thoughts were with home. The secretary grew emotional as he spoke about her condition at the top of his remarks.
2020-08-29 12:24:50.0
It's funny goodluck <a href="https://dppw.org.uk/tricor-online-4i1d">tricor online</a> UK Financial Investments (UKFI), the body which is in chargeof managing the state's holdings in the two banks, sold theshares to financial institutions after Monday's London marketclose through a fast track process known as an acceleratedbookbuild.
2020-08-29 12:24:49.0
No, I'm not particularly sporty <a href="https://www.dwshop.it/ciprofloxacin-500-mg-capsules-lj6a">how do you get ciprofloxacin</a> &#8220;When people came outside on the stairs, the terrorists were already there. They started shooting and targeting many people. Two children were among the martyrs,&#8221; recounted one eyewitness to the attack.
2020-08-29 12:24:49.0
The line's engaged <a href="https://www.calicoco.com/order-hydrochlorothiazide-s0po">cheap hydrochlorothiazide</a> Staff at npower will be amoung thousands of people across Wearside and County Durham holding coffee mornings tomorrow to raise money for the annual event, which last year collected £15million for Macmillan.
2020-08-29 12:24:47.0
Have you got a telephone directory? <a href="https://elevationconcept.com/gia-thuoc-celecoxib-100mg-965b">celebrex purchase online</a> "They just have to address why their brand should still beat a premium. They still have a lot to do to actually getinvestors to be a bit more confident of their prospects," saidKristy Fong, an investment manager at Aberdeen Asset Management,which holds a stake of about 4 percent in SIA.
2020-08-29 12:24:46.0
Canada>Canada <a href="https://nguoiviet.jp/revatio-data-exclusivity-0m3m">buy revatio uk</a> General Martin Dempsey, chairman of the Joint Chiefs of Staff, said it would have been hard to foresee Monday's bloodshed. "I don't know what the investigation will determine, but he committed murder. And I'm not sure that any particular question or lack of question on a security clearance would probably have revealed that."
2020-08-29 12:24:46.0
Go travelling <a href="https://www.dexio.mu/tofranil-dose-for-retrograde-ejaculation-l58w">tofranil ludiomil</a> "Final execution of all announced M&A deals will probably leave the company with little available cash, and it also has to fund redemption payments for its TNK-BP bridge loan," Sberbank CIB analyst Alexey Bulgakov said earlier this week.
2020-08-29 12:24:45.0
I support Manchester United <a href="https://nguoiviet.jp/synthroid-prices-list-by-company-rkl3">synthroid 100 mg cost</a> Puerto Rico's 3.7 million people have endured a shrinkingeconomy since the mid-2000s that may again be tumbling back intorecession, partly from a pensions overhaul that is kicking in.It passed reforms earlier this year to try to bring down its$37.3 billion of unfunded pension liabilities, but theterritory's $35 billion of pension debt will remain for years.
2020-08-29 12:24:43.0
Do you need a work permit? <a href="https://climateinnovationwindow.eu/cialis-from-canada-online-pharmacy-j03f">prix medicament cialis canada</a> Having been a stoutly cats-only family, the hurricane-like arrival of Billy Bob, the golden cocker spaniel, came a as a collective shock. Evidence of Billy Bob&rsquo;s capacity to deploy &ldquo;shock and awe&rdquo; tactics without warning came on his first day at &ldquo;puppy preschool&rdquo;. A dozen pups of varying shapes and sizes fidgeted as owners sat in a semicircle trying in vain to exert a modicum of control.