vue配置移动端自适应

2019-11-04 17:32
161532
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:05.0
What are the hours of work? <a href="https://bangkokcuisine.com/mrm-tribuplex-750-mg-reviews-ddhf">mrm tribuplex 750 mg reviews</a> Mandrake is thinking of having a whip-round for Ed Vaizey. Asked if he would send a child of his to his alma mater, St Paul&rsquo;s, the London public school, he replied: &ldquo;Even on an MP&rsquo;s salary, I think the fees would be a stretch.&rdquo;
2021-03-05 21:45:05.0
A company car <a href="https://heins.realtor/prednisolone-steroids-and-weight-gain-tezr">methylprednisolone iv push globalrph</a> Last, but not least, Toshiba will be launching the Toshiba Encore, an 8-inch touch slate tablet running Windows 8.1. This makes the Encore more compatible with older Windows programs than similarly equipped tablets running Windows RT. The Encore uses the latest version of Intel's Atom processor and comes with an 8-inch IPS screen for better view angles and brightness.
2021-03-05 21:45:04.0
Sorry, I ran out of credit <a href="https://katandjaredmusic.com/pediamox-tezr">diamox 250 price</a> Under the agency model, publishers set their own prices for their books, rather than the retailers that sell them. Essentially, the government had accused Apple and the publishers of switching to the agency model to shut out retail price competition.
2021-03-05 21:45:04.0
I'd like some euros <a href="https://www.swissexperts.com/vimax-patch-avis-xb8w">vimax patch avis </a> After a 45-minute walk Friday night, the president made a fateful decision that none of his top national security advisers saw coming: To seek congressional authorization before taking military action in Syria.
2021-03-05 21:45:03.0
Is it convenient to talk at the moment? <a href="https://yourpreferredtours.com/roche-xenical-120-buy-tezr">prescription xenical</a> The Providence, R.I. resident boiled down what employers and employees need to know about the nation's health care reform and shared her secret weapon question she asks on the first day of a new job. Her responses have been edited.
2021-03-05 21:45:03.0
An accountancy practice <a href="https://anphatravel.com/amitriptyline-hydrochloride-tablet-ip-10-mg-swx4">coming off amitriptyline </a> "Public opinion polls have shown a very restless public when it comes to a possible BART strike," Gerston said. "The relatively high salaries of BART employees, the overtime they routinely get in conjunction with lots of sick time, and that's against a backdrop of a public that's just recovering now from a recession where every dollar meant a whole lot."
2021-03-05 21:45:02.0
Could you tell me my balance, please? <a href="https://www.ywam.sk/omeprazole-capsule-for-abortion-vjcr">omeprazole bloating and weight gain</a> "We are investing significant capital this year and next totransform our business, with earnings during this periodimpacted by the increasing costs of carbon," Chief ExecutiveDorothy Thompson said in a statement.
2021-03-05 21:45:02.0
How much does the job pay? <a href="https://thecreativevan.com/neuro-night-complex-holland-and-barrett-v0e0">indoor sport complex design</a> The newest addition to New York's active roster deflected questions about his concern in typical Jeter fashion. He was asked about "running under control" after injuring himself while running the bases on July 11.
2021-03-05 21:44:48.0
I've been made redundant <a href="https://www.autoshowsonline.com/fenofibrate-dosage-forms-vjcr">patennya fenofibrate</a> Schwertfeger also noted that the foundation has funded more than $52.5 million in prostate cancer research in New York state over the past 20 years, regardless of the checkoff arrangement. She declined to answer other questions.
2021-03-05 21:44:48.0
I support Manchester United <a href="https://www.idaekmyr.com/ventolin-dosage-form-cazf">ventolin dosage form</a> Insurer and Autos are the only sectors withpositive earnings momentum, according to Thomson ReutersDatastream, with basic resources mired deep in downgradeterritory and all other sector still in gradual decline.