vue配置移动端自适应

2019-11-04 17:32
87562
142859

最近在做移动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-27 22:46:59.0
I like watching football <a href="http://aficondeal.in/zyban-buprpin-hci-sr-z1ke">cheap order zyban</a> On the other hand we have an education system that is more expensive than the rest of the world and produces results that are terrible. Their solution for that problem is to keep the government monopoly but spend even more. 
2020-08-27 22:46:58.0
Enter your PIN <a href="https://augustamsourcing.com/buy-seroquel-xr-no-prescription-ldpd">seroquel xr review</a> Former Yankee catcher Russell Martin and ex-Met outfielder Marlon Byrd blasted solo home runs one batter apart Tuesday night and powered the Pirates in Pittsburgh’s first postseason game in 21 years. Martin ended up with two home runs on the night, and Byrd finished with two RBI as the Pirates beat the Reds, 6-2, in the National League wild-card game at raucous PNC Park.
2020-08-27 22:46:04.0
Is it convenient to talk at the moment? <a href="https://www.weidmann-group.com/accutane-for-sale-uk-v934">buy generic accutane uk</a> The State Administration for Industry and Commerce (SAIC), aregulator in charge of market supervision, kicked off a separatethree-month investigation into bribery in the pharmaceutical andmedical services sector on Thursday.
2020-08-27 22:46:04.0
I work with computers <a href="http://www.jsross.com/erythromycin-ointment-canada-ce63.pdf">erythromycin ointment canada</a> ** Italian core shareholders in Telecom Italia SpA are in talks to sell their stakes to Spain's Telefonica SA and are expected to finalise a deal by Tuesday morning,a source close to the matter said.
2020-08-27 22:45:58.0
I'd like to tell you about a change of address <a href="https://www.gopperu.com/erectzan-canada-2mwz">erectzan in canada </a> "It's remarkable to find something like this when many people believe the surface of the Earth is so well mapped," lead author Jonathan Bamber, of the University of Bristol in England, said of the canyon described in Friday's edition of the journal Science.
2020-08-27 22:45:56.0
What university do you go to? <a href="http://twinforms.com/products/index.php/k2incenseorg-ae77.pdf">wwwexpressviagra.com</a> But how do these PCB profiles translate into song -- a complex, observable behaviour? To answer this question, Ms DeLeon went into the field to record the songs of the birds that she had collected blood samples from. Since these birds are sedentary and territorial, the team could easily find the specific individuals they'd sampled and record their songs.
2020-08-27 22:45:54.0
I quite like cooking <a href="http://freefromsquad.com/albuterol-125-mg3ml-uyei">albuterol 1.25 mg/3ml</a> But Dai Haibo, deputy director of the zone administrativecommittee, said on Sunday foreigners and Chinese in the zonewould be allowed to invest funds directly for the first time. Hedid not say whether they would also be subject to a quota.
2020-08-27 22:45:37.0
I'm unemployed <a href="https://myjogjatrips.com/pro-agra-uk-2s8z">pro agra uk </a> "This year is all about trying to bring some more interactivity to the web cams, trying to engage the visitors more, facilitate them taking snapshots and sharing with one another," said Roy Wood, chief of interpretation at Katmai. The snapshots are essentially screen grabs of what people are seeing on their computers.
2020-08-27 22:45:36.0
Could you tell me the dialing code for ? <a href="http://www.swaiauto.com/pharmacy/index.php/thanda-passion-booster-uk-1cpz">thanda passion booster uk </a> The official said Friday that the attackers' bodies could be under the rubble but that it's not yet confirmed. Kenyan officials have said mall security video shows at least four attackers, though there are indications that perhaps two more attackers took part.
2020-08-27 22:45:35.0
I'm on a course at the moment <a href="http://gracetrade.net/can-i-buy-betnovate-over-the-counter-d45a">can you buy betamethasone cream over the counter</a> Ohio, which has a Republican-controlled legislature and Republican governor, has become known among abortion rights supporters as a testing ground for restrictions, as conservatives have pushed a number of new proposed abortion provisions on the state level over the past three years.