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

vue打包的時(shí)候自動(dòng)將px轉(zhuǎn)成rem的操作方法

 更新時(shí)間：2018年06月20日 09:31:27   作者：劉小蘇蘇  
這篇文章主要介紹了vue打包的時(shí)候自動(dòng)將px轉(zhuǎn)成rem的操作方法,需要的朋友可以參考下

px2rem-loader 需要與 flexible 配合使用，不然px2rem僅僅只是轉(zhuǎn)成rem卻不會(huì)設(shè)置rem的信息

安裝 flexible

npm i lib-flexible -S

然后在main.js中引入

import 'lib-flexible/flexible'

直接引入的文件需要有優(yōu)先與引用的組件

安裝px2rem-loader

npm i px2rem-loader -D

在build的utils.js中找到cssLoader添加一下代碼

const px2remLoader = {
  loader: 'px2rem-loader',
  option: {
   remUnit: 75 // 設(shè)計(jì)圖寬度÷10
  }
 }

找到generateLoaders修改一下代碼

const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader]

具體如下

然后重啟項(xiàng)目

注意

因?yàn)榫W(wǎng)頁識(shí)別的精度有限，如果是1px轉(zhuǎn)成rem之后，會(huì)出現(xiàn)不識(shí)別的狀態(tài)，主要是在邊框的時(shí)候；

這時(shí)候可以在css語句后面加上/* no */ 表示此行語句不轉(zhuǎn)換；如

.tabs div{
    width: 218px;
    height: 70px;
    line-height: 72px;
    text-align: center;
    border: 1px solid #dcdcdc;/* no */
  }

總結(jié)

以上所述是小編給大家介紹的vue打包的時(shí)候自動(dòng)將px轉(zhuǎn)成rem的操作方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論