基于vue-cli配置lib-flexible + rem實現(xiàn)移動端自適應(yīng)
安裝flexible
npm install lib-flexible --save
引入flexible
在項目入口文件main.js中添加如下代碼,引入flexible
import 'lib-flexible'
px 轉(zhuǎn) rem
使用 webpack 的 px2rem-loader,自動將px轉(zhuǎn)換為rem
安裝px2rem-loader
npm install px2rem-loader --save-dev
配置px2rem-loader
在vue-cli生成的文件中,找到以下文件 build/utils.js,如下圖添加配置
關(guān)于importLoaders:如若有疑問,請參考webpack深入與實戰(zhàn)4-4
2017.12.8更新說明:是否需要配置importLoaders,可參考最底部的說明。
px2rem 用法
安裝px2rem后,再使用px上有些不同,大家可以參考px2rem官方介紹,下面簡單介紹一下。
直接寫px,編譯后會直接轉(zhuǎn)化成rem ---- 除開下面兩種情況,其他長度用這個
在px后面添加/*no*/,不會轉(zhuǎn)化px,會原樣輸出。 --- 一般border需用這個
在px后面添加/*px*/,會根據(jù)dpr的不同,生成三套代碼。---- 一般字體需用這個
示例代碼
編譯前(自己寫的代碼)
.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; }
重啟項目,就可以愉快的用設(shè)計稿上的px了。
注意:坑
不能在index.html的頭部加 name 為 viewport 的 meta 標簽,flexible會自動為我們添加!
更新:對外部引入css,px2rem能不能轉(zhuǎn)換rem問題
2017.12.8更新:在實際運用中發(fā)現(xiàn)對于外部引入的css文件,有時候px2rem能正常轉(zhuǎn)換,有時候又不能轉(zhuǎn)換,到底是什么原因呢?試驗了三種不同的css引入情況,發(fā)現(xiàn)第一種能正常轉(zhuǎn)換,二三不能正常轉(zhuǎn)換,至于原因,由于才疏學(xué)淺,還是不懂,求大神解答三種引入方式的區(qū)別。
如果明白了這些方法,就沒必要再配置cssLoader的importLoaders了,因為下面的方法更容易控制外部引入的css是否需要轉(zhuǎn)rem,而更改importLoaders就控制不了了,它會強制轉(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實現(xiàn)移動端自適應(yīng),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
vue.js 解決v-model讓select默認選中不生效的問題
這篇文章主要介紹了vue.js 解決v-model讓select默認選中不生效的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue-cli 3.0 版本與3.0以下版本在搭建項目時的區(qū)別詳解
這篇文章主要介紹了vue-cli 3.0 版本與3.0以下版本在搭建項目時的區(qū)別詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12Vue處理循環(huán)數(shù)據(jù)流程示例精講
這篇文章主要介紹了Vue處理循環(huán)數(shù)據(jù)流程,這個又是一個編程語言,?模版語法里面必不可少的一個,?也是使用業(yè)務(wù)場景使用最多的一個環(huán)節(jié)。所以學(xué)會使用循環(huán)也是重中之重了2023-04-04結(jié)合el-upload組件實現(xiàn)大文件分片上傳功能
Element UI的el-upload上傳組件相信各位小伙伴都已經(jīng)非常熟悉,最近接了一個新需求,要求在el-upload組件基礎(chǔ)上實現(xiàn)分片上傳功能,即小于等于5M文件正常上傳,大于5M文件切成5M每片上傳,那么這個功能怎么實現(xiàn)呢?一起看看吧2022-09-09element-ui表單提交自動清空隱藏表單值實現(xiàn)
這篇文章主要為大家介紹了element-ui表單提交自動清空隱藏表單值實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07