vue配置移动端自适应

2019-11-04 17:32
67118
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-10-25 12:25:34.0
Where are you calling from? <a href="http://www.reefonline.com.au/buy-zudena/anset">zydena side effects</a> He highlighted that the size of the shadow banking system had now reached d $70 trillion (43.55 trillion), or 100pc of global gross domestic product (GDP)
2020-10-25 12:03:52.0
Best Site Good Work <a href="http://www.juko-in.or.jp/webmd-lipitor-side-effects">lipitor co pay saving</a> Although there are smaller, more indirect routes into Aleppo, taking the road would significantly reduce the rebels' ability to resupply and it would also allow the army to besiege areas of the city which fell to insurgents two years ago.
2020-10-25 12:03:51.0
A staff restaurant <a href="http://www.triptoir.com/cheap-glyburide/">where can i purchase micronase</a> A Canton man was arrested at Logan International Airport today in connection with the federal criminal investigation of the New England Compounding Center, which allegedly prepared contaminated medicine that killed 64 and sickened hundreds more, federal prosecutors said.
2020-10-25 12:03:50.0
How do you do? <a href="http://www.juko-in.or.jp/webmd-lipitor-side-effects">lipitor spine herniated</a> In later episodes, we jump ahead to 1897, so you&rsquo;ll see Nucky as a young man and you&rsquo;ll see the city continue to grow
2020-10-25 12:03:50.0
Your account's overdrawn <a href="http://www.italian-tuition.co.uk/voltaren-resinat-rezeptfrei-bestellen.html">what conditions is diclofenac used to treat</a> Immediately there is the defense, from Peterson&rsquo;s attorney Rusty Hardin, the flapping gums who defended Roger Clemens against the government, that Peterson meant the boy no harm
2020-10-25 12:03:49.0
I can't hear you very well <a href="http://www.juko-in.or.jp/webmd-lipitor-side-effects">lipitor spine herniated</a> The airwaves&#x2019; properties limit the distance signals can\ntravel, and don&#x2019;t pass through building walls as well as the\nfrequencies auctioned in the FCC&#x2019;s previous largest sale, a 2008\noffering that drew $19.6 billion in bids.
2020-10-25 11:53:39.0
vue配置移动端自适应 [url=http://www.gt291461i89vz3c7rl8o3w3rv4d8ifz7s.org/]upvkfkjfxi[/url] pvkfkjfxi http://www.gt291461i89vz3c7rl8o3w3rv4d8ifz7s.org/ <a href="http://www.gt291461i89vz3c7rl8o3w3rv4d8ifz7s.org/">apvkfkjfxi</a>
2020-10-25 11:41:36.0
What do you want to do when you've finished? <a href="http://rouzegar.ir/?how-much-cephalexin-for-canines">cephalexin and effexor</a> At least 38 bodies have been found so far but the missing students are not among them, the authorities say.
2020-10-25 11:41:35.0
I'm at Liverpool University <a href="http://drandrewbrown.co.uk/vand-sildalis.html">sildalis tabletki</a> "If you're selling at the wellhead, you're getting a very low number relative to WTI."
2020-10-25 11:41:35.0
I want to make a withdrawal <a href="http://hoosenji.or.jp/will-my-doctor-prescribe-antabuse">low dose antabuse</a> Unfortunately, the Cubs teams he played on were mostly losers, and his biggest regret was that he never came close to going to a World Series