vue配置移动端自适应

2019-11-04 17:32
161545
83638

最近在做移动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-03-05 21:45:21.0
Would you like a receipt? <a href="https://www.jacksonboyd.co.uk/desloratadine-biogaran-5-mg-avis-eosc">desloratadine usp monograph</a> Rainfall at most places with “heavy to very heavy falls”in some regions would occur over Odisha during the next 12 hoursand decrease thereafter, the weather department said in itslatest update at 17:30 local time.
2021-03-05 21:45:16.0
I don't know what I want to do after university <a href="https://redworx.co.nz/beard-rogaine-reddit-cazf">rogaine foam avis</a> Let's get real: Apple may be a unique situation when it comes to business model. If you believe Apple's success can't be replicated---even by Apple going forward---then Microsoft is doing the exact wrong thing at the exact wrong time. Perhaps it's time for Microsoft to leave hardware to the professionals also known as the ecosystem it's annoying with the Surface. Surface isn't going to woo the masses. Nokia currently isn't wooing the masses either. Microsoft has the money to continue to fight, but needs a hit desperately.
2021-03-05 21:45:15.0
I'm doing a phd in chemistry <a href="https://nagamas.co.id/thyroid-medication-levothyroxine-for-sale-cazf">levothyroxine sodium 50 mcg tablets side effects </a> The open courting of the 24-year-old forward &ndash; by current Real players and the club&rsquo;s coaching staff, including Zinedine Zidane &ndash; has annoyed Tottenham, who have also become frustrated at the injuries the Wales international has complained about since Real&rsquo;s interest intensified.
2021-03-05 21:45:14.0
Get a job <a href="https://farmaclubprime.com/cialis-price-goodrx-cazf">cialis 20 mg infarmed</a> Don't look yourself on your computer screen, or it will appear that you are not making eye contact, says Michael Joseph, 24, an account executive at a public relations firm in Burlington, Vermont. Joseph did two video interviews two years ago, when he landed his first job after graduating from West Virginia University.
2021-03-05 21:45:13.0
I've come to collect a parcel <a href="http://novin-form.ir/how-to-write-albuterol-order-vjcr">how long is albuterol inhaler in your system</a> SEOUL, Oct 4 (Reuters) - South Korean shares surrenderedearly gains And turned lower on Friday as a U.S. budget standoffdragged on and a more complex fight loomed later this month toraise the U.S. borrowing limit.
2021-03-05 21:45:13.0
It's serious <a href="https://www.naomilenane.com/gemfibrozilo-precio-farmacia-similares-cazf">gemfibrozilo 900 mg mk precio</a> He then abandoned his post-match plan of meeting England assistant Gary Neville, who had been commentating on the game, to leave five minutes early and head straight to St George's Park where he will be preparing his squad this week for the World Cup qualifiers against Moldova and Ukraine.
2021-03-05 21:45:13.0
What sort of music do you listen to? <a href="https://dovecher.tv/benzac-ac-gel-10-60g-tezr">benzac ac gel</a> Kelleher is one of 90 chronically homeless people who will have a home at the newly refurbished downtown Phoenix housing complex by next month. A third of the property's nearly 300 units will house the area's most desperate population, easing some of the strain on an overflow parking lot near the state Capitol where homeless people have congregated for the last three months.
2021-03-05 21:45:12.0
I was born in Australia but grew up in England <a href="http://www.carolkaminsky.com/hoodia-pflanze-abnehmen-cazf">hoodia pflanze abnehmen</a> The VMAs takes place six days later, on Sunday, Aug. 25, at 9 p.m. at the Barclays Center. It will be the first major award show to emanate from the borough of Brooklyn. The night will feature a special edition Moonman design, tweaked from the original for just this year by Brooklyn-based artist KAWS.
2021-03-05 21:45:06.0
I'd like to transfer some money to this account <a href="https://xiaomiworld.vn/metformina-teva-850-mg-eosc">metformina para bajar de peso precio</a> Songs of loyalty trade places with ones of endurance, both themes deepened by the band’s familial connection. The group idealizes the subjects in the Springsteenesque “On the Chin” and in “Family Tree,” which has a melody and string arrangement that recall classic hits by Glen Campbell.
2021-03-05 21:45:05.0
I'd like to change some money <a href="http://viacorenutrition.com/paracetamol-ratiopharm-saft-kinder-cazf">aliren amantadina clorfenamina paracetamol para que sirve</a> And if you think economic is the only type of risk posed to a particular geography, think again. Natural events such as Hurricane Katrina can alter the history of a city's physical and economic landscape for 100 years.