vue配置移动端自适应

2019-11-04 17:32
119939
1006

最近在做移动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-18 01:37:31.0
I've just started at https://littlehandspediatrictherapy.com/stmap_87ywkjdd.html?cialis.emsam.bisoprolol what is azelastine eye drops used for And will his return to Queens on Sunday for induction into the Mets’ Hall of Fame signal the beginning of a phase in which he inches toward becoming a more regular presence? For all the drama and on-field struggle of recent years, the Mets have been strong about retaining important faces, and drawing connections to their past; Tom Seaver, Keith Hernandez, Mookie Wilson, John Franco, Edgardo Alfonzo, Ron Darling, Tim Teufel, Wally Backman and Bob Ojeda are among those who work either for the team or its broadcast.
2021-01-18 01:37:31.0
Until August https://www.snvp.org/stmap_49srtxoh.html?synthroid.tadaga.gyne-lotrimin.levitra aleve naproxeno sodico 220 mg para que sirve Screen mirroring is nothing new by any stretch. Apple TV can do mirroring quite well, but it does require a fairly new Apple-branded desktop or laptop and the latest operating system to get it to work properly. The beauty of Chromecast is that it brings that ability to the masses with a low price and the ability to use any computer or laptop. That accessibility is what really drives home the point that Chromecast is something to keep an eye on.
2021-01-18 01:37:30.0
I've lost my bank card https://www.icleaning.co.il/stmap_87ywkjdd.html?vytorin.levitra.artane kamagra comprim avis Oddly, it was one of most conservative owners in football history who carried the banner of change. George Preston Marshall, who ran the fledgling Boston Braves NFL franchise, was a bigoted bully of a man who opposed integration in pro football, fought the formation of a players' union and soon would change the nickname of his team to the Redskins.
2021-01-18 01:37:30.0
Children with disabilities http://davidemontalbano.com/stmap_52fmfjaw.html?ethinyl.parafon.viagra.vilitra ringworm clotrimazole and betamethasone dipropionate Don’t worry, that’s not a spoiler. That’s as much as the audience knows about the narrative. As DeHaan’s character, Trip, sets out on this mission, things begin to spiral out-of-control. The best word to describe what he experiences is simply the apocalypse. From riots to mass killings to a cryptic, masked horseman — and a few even stranger things thrown in — Trip goes through hell, but never loses focus of the task at hand. The narrative is frustratingly open-ended, but that’s exactly what the band wants. They want you to be able to have a conversation about what you witnessed and to get into debates about the meaning behind the story.
2021-01-18 01:37:29.0
Recorded Delivery https://www.icleaning.co.il/stmap_87ywkjdd.html?endep.viagra.azelaic.xeloda minoxidil 5 gnstig kaufen But her self-proclaimed party girl pal, Cyrus, 20, is showing her rebellious side in a different way. The "We Can't Stop" twerking singer recently admitted to making a reference to "molly" in her hit song, which is the slang term for the drug MDMA or ecstasy.
2021-01-18 01:33:48.0
We used to work together https://www.niramayatales.com/stmap_52fmfjaw.html?secnidazole.levitra.vrikshamla ranitidine accord There will also be a review of whether groups such as the humanists will be allowed to carry out marriages, while ministers said they were prepared to look at eliminating any difference in the treatment of gay couples when it came to pension schemes.
2021-01-18 01:33:48.0
Photography https://www.footreliefinsoles.com/ordernow/index.php/stmap_87ywkjdd.html?levitra.levobunolol.ginseng valtrex dosage for cold sores 500mg Naming Bernanke's successor, Obama said, is "one of the most important economic decisions that I'll make as president," noting that the Fed chair "is one of the most important policymakers in the world, and the next chair will help guide our economy after I've left office."
2021-01-18 01:33:47.0
I work here https://modernizmasateiciai.lt/stmap_49srtxoh.html?viagra.spiriva.risperdal bactrim for staph To send an expedition to Mars today, NASA would have to knowingly expose astronauts to cancerous, or even lethal, levels of space radiation. It's an ethical quandary for those involved in NASA's renewed push toward deep-space exploration. And it's being explored by some of the most distinguished scholars, scientists, engineers, health professionals and ethicists in the nation.
2021-01-18 01:33:47.0
Where's the postbox? http://srimatitechno.org/Srimati/pharmacyonline/index.php/stmap_49srtxoh.html?erectafil.cialis.citalopram cialis kaufen in deutschland Even though she needs to clarify that, "Yes, that is my real name" upon every introduction, Earhart considers the name her parent's greatest gift: the woman's values, charity, work ethic and aviation skills animate everything in her life.
2021-01-18 01:33:45.0
I like watching football https://www.footreliefinsoles.com/ordernow/index.php/stmap_87ywkjdd.html?levitra.levobunolol.ginseng can you use motrin and tylenol together Under these proposals, clinical-trial data, information or documents not subject to restrictions on access to commercially confidential information or personal data would, from 1 January 2014, be available to download once the agency had published its European public assessment report on an application for centralised authorisation.