vue配置移动端自适应

2019-11-04 17:32
67123
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-27 17:55:32.0
Have you ever considered about including a little bit more than judt your articles? I mean, what you say is valuable and everything. But thihk about if you added some great visuals or videos to give your postgs more, "pop"! Your content is excellent but with images and clips, this site could definitely be one off the most beneficial inn its field. Terrific blog! клапан соленоид website установка системполива
2020-10-27 15:41:02.0
vue配置移动端自适应 [url=http://www.g918w5c2vv573r72kw6cu6o38hyhz5b0s.org/]uditoxhkyos[/url] <a href="http://www.g918w5c2vv573r72kw6cu6o38hyhz5b0s.org/">aditoxhkyos</a> ditoxhkyos http://www.g918w5c2vv573r72kw6cu6o38hyhz5b0s.org/
2020-10-27 14:41:25.0
Wonderful site. A lot of helpful information here. I am srnding it to several friends ans additionally sharing in delicious. And of course, thanks on your effort! утепление домов харьков homepage фасадный утеплитель
2020-10-27 11:42:56.0
vue配置移动端自适应 sokvoojcn http://www.ggm5591an5rkynu1y3k9v538a1l2p661s.org/ [url=http://www.ggm5591an5rkynu1y3k9v538a1l2p661s.org/]usokvoojcn[/url] <a href="http://www.ggm5591an5rkynu1y3k9v538a1l2p661s.org/">asokvoojcn</a>
2020-10-26 12:08:53.0
Thanks for sharing your thoughts about vue移动自适应,微信公众号rem适配,rem适配,移动端自适应. Regards криоконсервация эмбрионов цена homepage консультация гинекология
2020-10-26 06:50:20.0
suresiyle kullan?labiliyor. Türkiye'de 1xbet bahis şirketi • Kredi Kart? Visa kartlar?n?z ile 10 TL, Master Calling-card ile 15 TL alt limitle deposit yapabilirsiniz. Big boss Birthday card sahibiyseniz 5 TL uzeri tutarlar? cekebilirsiniz. • WebMoney WebMoney yontemini kullan?yorsan?z 3 TL alt limitle keep, 5 TL ve uzeri tutarlarla da cekim talebi verebilirsiniz. • EcoPayz Minimum 3 TL ile yat?r?m, maksimum 5 TL ile cekim yapabilirsiniz. • AstroPay 3 TL ve uzeri tutarlar? yat?rabiliyorken 5 TL ve uzerindeki tutarlar icinde cekim talebi verebilirsiniz. • Paykasa Kulland?g?n?z odeme yontemi Paykasa ise 3 TL alt limitin uzerindeki tum tutarlar? an?nda yat?rabilirsiniz. Cekim talebi icin minimal islem tutar? 5 TL’dir. • PayKwik Yaln?zca partial payment islemleri icin 3 TL alt limitle kullan?labilmektedir. 1xbet Bonus ve Promosyonlar? http://dmgw.dev/index.php/T%C3%BCrkiye_de_1xbet_Bahis_%C5%9Firketi_1xbet_Uygulama_1xbet_Mobil_Versiyon_Android_I%C3%A7in_1xbet_i_Indirin_1xbet_Bahis_Bonuslar_1xbet_T%C3%BCrkiye Her yeni bahis cut off gibi Turkler icinde bonuslar en onemli k?s?md?r. 1xbet bahis sitesi de bunu en iyi sekilde sunmaktad?r. • Hos Geldin Bonusu Uyeliginizi act?ktan hemen sonra yapacag?n?z ilk lay islemine sunulan bonustur. En fazla 300 TL’ye kadar yararlanabileceginiz bu promosyondan %100 oran?nda yararlanabilirsiniz. • PromoCode Bonusu • Telegram Bonusu • Y?ld?z Jackpot Promosyonu • Bahis Kuponlar? Savas? Turnuvas? • 1xRace Bonusu • Dogum Gunu Bonusu 1xbet Musteri Hizmetleri 1xbet canl? destek hizmeti sunuyor ancak bunun haricinde de cok ilginc bir dan?smanl?k hizmeti veriyor. Her bahis sitesinde gordugumuz mesaj yoluyla ulas?m, despatch yordam?yla adresinden iletisim mumkun. Bunlar?n haricinde ise yurt ici servis numaras?yla musterilerine telefon destegi sunuyor. 1xbet Guvenilir Mi? Bahis oynatma lisans?n? Curacao uzerinden alm?s olan 1xbet Restricted sirketi Turkiye’nin koklu platformlar? aras?nda bulunuyor. Lisans?n?n haricinde de GoDaddy taraf?ndan saglanm?s olan SSL sertifikas?n?n aktif oldugunu gorebiliyoruz. 1xbet Genel Degerlendirme Bonuslar 1xbet Türkiye 1xbet guncel giris adresi ise 1x-turkey.com olarak guncellendi. Bahis dunyas?nda ayr?cal?kl? bir bahis yelpazesini bir araya getiren sirketin gerek bonuslar?yla, gerek an?nda odeme yontemleriyle gerekse guvenilirligiyle dikkat cekmeye devam ettigini soyleyebiliriz.
2020-10-25 12:25:38.0
Do you know the number for ? <a href="http://www.coachhiredirect.co.uk/antiviral-medication-over-the-counter-australia/">anti vertigo medicine meaning</a> The right tire eventually blew after another barrier brush; sparks flew from the vehicle&rsquo;s underside
2020-10-25 12:25:37.0
real beauty page <a href="http://www.weekendcruise.co.uk/drug-protonix/">protonix generics</a> Eisenhower gave the watch to John Moaney, an Army sergeant who was his valet for nearly 30 years after being assigned to him in wartime London in 1942, as a token of his appreciation, RR Auction said in a statement
2020-10-25 12:25:36.0
I want to report a <a href="http://www.ttr-codnor.co.uk/acheter-moduretic-en-ligne.html">moduretic</a> However, please note - if you block/delete all cookies, some features of our websites, such as remembering your login details, or the site branding for your local newspaper may not function as a result.
2020-10-25 12:25:35.0
Have you got any experience? <a href="http://www.cupinfo.com.au/precio-computadoras-vit-de-escritorio/">tadora review</a> Although the victim confided in her mother and friends, it was more than 20 years before she went to police with her claims, after seeing that the singer had admitted child pornography charges in 1999, the court heard.