vue配置移动端自适应

2019-11-04 17:32
67153
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:24:42.0
Have you got any ? <a href="http://www.tuttifuori.net/abs-of-steel-3485.pdf">abs of steel part 2</a> The company had planned to list in Hong Kong, but theexchange there threw cold water on Ma's plan to give Alibaba'sinsiders, who only own about 10 percent of the stock, the powerto nominate a majority of the board, sources say. Regulators inthe Chinese territory said that all shareholders must be treatedequally.
2020-08-29 12:24:41.0
Jonny was here <a href="http://www.thebeaglegazette.com/pharmacy/index.php/cardura-e-effetti-collaterali-utk1">generic for cardura</a> “Who amongst us didn’t have some crazy night where you see a poster of some random old dude,” says Schaefer, referring to Bieber’s recent encounter with a Bill Clinton photo, which prompted a searing rebuke from the Bieb. “When I was 19, if I saw a poster of Jimmy Carter, I would say ‘F— you, Jimmy Carter!’ ”
2020-08-29 12:24:40.0
Sorry, you must have the wrong number <a href="http://elblaugrana.hu/safe-place-to-buy-clomid-online-u0qb">likelihood twins 50mg clomid </a> North West Norfolk MP Henry Bellingham and South West Norfolk MP Elizabeth Truss have called for an urgent meeting with health secretary Jeremy Hunt in the light of two critical reports into the hospital last week.
2020-08-29 12:24:37.0
Get a job <a href="http://neonracingteam.com/buy-thermakor-australia-b4nq">buy thermakor australia </a> This is a type of cookie which is collected by Adobe Flash media player (it is also called a Local Shared Object) - a piece of software you may already have on your electronic device to help you watch online videos and listen to podcasts.
2020-08-29 12:24:33.0
Do you like it here? <a href="https://cadeau3d.com/zithromax-mg-ba64.pdf">buy generic zithromax (azithromycin)</a> Nelson Cruz, right fielder, Texas Rangers, 50 games: The 2011 AL championship series MVP, Cruz had never previously been linked to performance-ending drugs. After his name showed up in the Miami New Times report on Biogenesis of America, attorneys for Cruz issued a statement that read, "To the extent these allegations and inferences refer to Nelson, they are denied." When Cruz reported to spring training in February he said it was "shocking" and "depressing" to see his name connected with Biogenesis. Even with the lingering questions, he became an All-Star for the second time last month. Cruz, who turned 33 on July 1, is eligible for free agency after this season. He signed a $16 million, two-year contract to avoid salary arbitration in February 2012, when the Rangers were fresh off two straight World Series appearances. He leads second-place Texas with 27 homers and 76 RBIs this year. Salary lost: $2,732,240.
2020-08-29 12:24:33.0
I'm doing a phd in chemistry <a href="https://chulovip.com/dapoxetine-tablet-102z">buy dapoxetine online australia</a> Bay's case was confirmed by the Free Speech Coalition, which records information on performers' sexually transmitted disease (STD) tests. The organization said evidence pointed to the fact that she was infected off set.
2020-08-29 12:24:32.0
Do you have any exams coming up? <a href="https://www.tyrecruitment.co.uk/buy-cheap-bactrim-online-a5mx">does bactrim ds contain sulfa</a> &ldquo;Well, I watch nature programmes and find myself weeping, so it&rsquo;s definitely made me vulnerable in some ways,&rdquo; he says of the birth of his two sons, Malachy, 7, and Carrick, 5. Murphy says they will both have to wait till they reach 18 before watching the sort of films that have made him famous. &ldquo;They&rsquo;re not really interested,&rdquo; the Inception star adds, self-deprecatingly.
2020-08-29 12:24:32.0
Have you got any qualifications? <a href="https://chulovip.com/sirius-viagra-commercial-67rn">pfizer viagra price in india</a> Data on weekly U.S. initial jobless claims and nationalmanufacturing came in better than expected. The Institute forSupply Management index of national factory activity for Julyrose to its highest level since June 2011.
2020-08-29 12:24:31.0
Where's the nearest cash machine? <a href="https://www.elmartillodecrow.com/index.php/2000-mg-amoxicillin-at-once-0188.pdf">amoxicillin 500 mg price walmart</a> A few weeks ago, Victoria Switzer and other activists from Dimock endorsed a candidate for governor who supports natural gas production from gigantic reserves like the Marcellus Shale, albeit with more regulation and new taxes. Dimock was the centerpiece of "Gasland," a documentary that galvanized opposition to fracking, and Switzer was also featured in this summer's "Gasland Part II," which aired on HBO.
2020-08-29 12:24:24.0
Not available at the moment <a href="https://augustamsourcing.com/where-do-i-buy-valtrex-wthh">valtrex and breast milk supply</a> Lee worked at Citadel from 2006 until he was fired in 2008,according to a spokeswoman for the firm. The spokeswoman, KatieSpring, said Lee worked as a team member in a merger arbitragegroup known as Principal Strategies, which was shuttered as aresult of the financial crisis.