欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于vue-cli配置lib-flexible + rem實(shí)現(xiàn)移動(dòng)端自適應(yīng)

 更新時(shí)間:2017年12月26日 10:48:39   投稿:mrr  
這篇文章主要介紹了基于vue-cli配置lib-flexible + rem實(shí)現(xiàn)移動(dòng)端自適應(yīng),需要的朋友可以參考下

安裝flexible

npm install lib-flexible --save

引入flexible

在項(xiàng)目入口文件main.js中添加如下代碼,引入flexible

import 'lib-flexible'

px 轉(zhuǎn) rem

使用 webpack 的 px2rem-loader,自動(dòng)將px轉(zhuǎn)換為rem

安裝px2rem-loader

npm install px2rem-loader --save-dev

配置px2rem-loader

在vue-cli生成的文件中,找到以下文件 build/utils.js,如下圖添加配置

關(guān)于importLoaders:如若有疑問,請(qǐng)參考webpack深入與實(shí)戰(zhàn)4-4

2017.12.8更新說明:是否需要配置importLoaders,可參考最底部的說明。

px2rem 用法

安裝px2rem后,再使用px上有些不同,大家可以參考px2rem官方介紹,下面簡(jiǎn)單介紹一下。

直接寫px,編譯后會(huì)直接轉(zhuǎn)化成rem ---- 除開下面兩種情況,其他長(zhǎng)度用這個(gè)

在px后面添加/*no*/,不會(huì)轉(zhuǎn)化px,會(huì)原樣輸出。 --- 一般border需用這個(gè)

在px后面添加/*px*/,會(huì)根據(jù)dpr的不同,生成三套代碼。---- 一般字體需用這個(gè)

示例代碼

編譯前(自己寫的代碼)

.selector {
 width: 150px;
 height: 64px; /*px*/
 font-size: 28px; /*px*/
 border: 1px solid #ddd; /*no*/
}

編譯后(打包后的代碼)

.selector {
 width: 2rem;
 border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
 height: 32px;
 font-size: 14px;
}
[data-dpr="2"] .selector {
 height: 64px;
 font-size: 28px;
}
[data-dpr="3"] .selector {
 height: 96px;
 font-size: 42px;
}

重啟項(xiàng)目,就可以愉快的用設(shè)計(jì)稿上的px了。

注意:坑

不能在index.html的頭部加 name 為 viewport 的 meta 標(biāo)簽,flexible會(huì)自動(dòng)為我們添加!

更新:對(duì)外部引入css,px2rem能不能轉(zhuǎn)換rem問題

2017.12.8更新:在實(shí)際運(yùn)用中發(fā)現(xiàn)對(duì)于外部引入的css文件,有時(shí)候px2rem能正常轉(zhuǎn)換,有時(shí)候又不能轉(zhuǎn)換,到底是什么原因呢?試驗(yàn)了三種不同的css引入情況,發(fā)現(xiàn)第一種能正常轉(zhuǎn)換,二三不能正常轉(zhuǎn)換,至于原因,由于才疏學(xué)淺,還是不懂,求大神解答三種引入方式的區(qū)別。

如果明白了這些方法,就沒必要再配置cssLoader的importLoaders了,因?yàn)橄旅娴姆椒ǜ菀卓刂仆獠恳氲腸ss是否需要轉(zhuǎn)rem,而更改importLoaders就控制不了了,它會(huì)強(qiáng)制轉(zhuǎn)換。

<style src='../assets/style.css'>
 /* px2rem能正常轉(zhuǎn)換 */
</style>
<style>
 /* px2rem不能正常轉(zhuǎn)換 */
 @import '../assets/style.css';
</style>
<style>
 /* px2rem不能正常轉(zhuǎn)換 */
 @import url('../assets/style.css');
</style>

總結(jié)

以上所述是小編給大家介紹的基于vue-cli配置lib-flexible + rem實(shí)現(xiàn)移動(dòng)端自適應(yīng),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • vue2.0 axios跨域并渲染的問題解決方法

    vue2.0 axios跨域并渲染的問題解決方法

    下面小編就為大家分享一篇vue2.0 axios跨域并渲染的問題解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • vue.js 解決v-model讓select默認(rèn)選中不生效的問題

    vue.js 解決v-model讓select默認(rèn)選中不生效的問題

    這篇文章主要介紹了vue.js 解決v-model讓select默認(rèn)選中不生效的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • 關(guān)于electron打包的坑

    關(guān)于electron打包的坑

    本文主要介紹了關(guān)于electron打包的坑,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-03-03
  • Vue2.x 的雙向綁定原理及實(shí)現(xiàn)

    Vue2.x 的雙向綁定原理及實(shí)現(xiàn)

    這篇文章主要介紹了Vue2.x 的雙向綁定原理,Vue 是利用的 Object.defineProperty() 方法進(jìn)行的數(shù)據(jù)劫持,利用 set、get 來檢測(cè)數(shù)據(jù)的讀寫。需要的朋友可以參考下面文章的具體內(nèi)容
    2021-09-09
  • vue-cli 3.0 版本與3.0以下版本在搭建項(xiàng)目時(shí)的區(qū)別詳解

    vue-cli 3.0 版本與3.0以下版本在搭建項(xiàng)目時(shí)的區(qū)別詳解

    這篇文章主要介紹了vue-cli 3.0 版本與3.0以下版本在搭建項(xiàng)目時(shí)的區(qū)別詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-12-12
  • vue項(xiàng)目運(yùn)行npm?install報(bào)錯(cuò)問題及解決

    vue項(xiàng)目運(yùn)行npm?install報(bào)錯(cuò)問題及解決

    這篇文章主要介紹了vue項(xiàng)目運(yùn)行npm?install報(bào)錯(cuò)問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-08-08
  • Element-ui upload上傳文件限制的解決方法

    Element-ui upload上傳文件限制的解決方法

    這篇文章主要介紹了Element-ui upload上傳文件限制的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-01-01
  • Vue處理循環(huán)數(shù)據(jù)流程示例精講

    Vue處理循環(huán)數(shù)據(jù)流程示例精講

    這篇文章主要介紹了Vue處理循環(huán)數(shù)據(jù)流程,這個(gè)又是一個(gè)編程語言,?模版語法里面必不可少的一個(gè),?也是使用業(yè)務(wù)場(chǎng)景使用最多的一個(gè)環(huán)節(jié)。所以學(xué)會(huì)使用循環(huán)也是重中之重了
    2023-04-04
  • 結(jié)合el-upload組件實(shí)現(xiàn)大文件分片上傳功能

    結(jié)合el-upload組件實(shí)現(xiàn)大文件分片上傳功能

    Element UI的el-upload上傳組件相信各位小伙伴都已經(jīng)非常熟悉,最近接了一個(gè)新需求,要求在el-upload組件基礎(chǔ)上實(shí)現(xiàn)分片上傳功能,即小于等于5M文件正常上傳,大于5M文件切成5M每片上傳,那么這個(gè)功能怎么實(shí)現(xiàn)呢?一起看看吧
    2022-09-09
  • element-ui表單提交自動(dòng)清空隱藏表單值實(shí)現(xiàn)

    element-ui表單提交自動(dòng)清空隱藏表單值實(shí)現(xiàn)

    這篇文章主要為大家介紹了element-ui表單提交自動(dòng)清空隱藏表單值實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07

最新評(píng)論