成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue-cli 配置flexible

caoym / 1669人閱讀

摘要：一般需用這個在后面添加會根據(jù)的不同，生成三套代碼。如果明白了這些方法，就沒必要再配置的了，因為下面的方法更容易控制外部引入的是否需要轉(zhuǎn)，而更改就控制不了了，它會強制轉(zhuǎn)換。能正常轉(zhuǎn)換不能正常轉(zhuǎn)換不能正常轉(zhuǎn)換

基于vue-cli配置手淘的lib-flexible + rem，實現(xiàn)移動端自適應

沒接觸過flexible的建議先看看大漠的這篇文章這樣你才會知道長度為什么用rem，而字體要用px

安裝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,如下圖添加配置

關于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 #ffffd; /*no*/
}

編譯后（打包后的代碼）

.selector {
    width: 2rem;
    border: 1px solid #ffffd;
}
[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;
}

重啟項目，就可以愉快的用設計稿上的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)換，至于原因，由于才疏學淺，還是不懂，求大神解答三種引入方式的區(qū)別。

如果明白了這些方法，就沒必要再配置cssLoader的importLoaders了，因為下面的方法更容易控制外部引入的css是否需要轉(zhuǎn)rem，而更改importLoaders就控制不了了，它會強制轉(zhuǎn)換。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89560.html

相關文章

  • webpack手動構(gòu)建vue和vue-cli構(gòu)建使用 px2rem-loader ,全局自動轉(zhuǎn)換px

    摘要：做移動端時，適配是必須的。使用單位，可在不同屏幕上完美顯示相同的布局。文件首先要把轉(zhuǎn)成正常的，在交給來做，所以是外還需要加上一個設計稿寬度表示轉(zhuǎn)換過程小數(shù)保留幾位。安裝配置結(jié)束后，重啟項目。會發(fā)現(xiàn)自己設置的被轉(zhuǎn)為了。 做移動端時，適配 是必須的。使用rem單位，可在不同屏幕上完美顯示相同的布局。px2rem 插件方便的將px單位轉(zhuǎn)為了rem。 1. 自己手動構(gòu)建vue webpck配置...

    AWang 評論0 收藏0

  • 說說vue-cli中使用flexible和px2rem-loader

    摘要：下載或在項目中引入一般情況在中引入設置標簽視情況而定安裝或在中配置，在項目文件中找到，將添加到中，，下的根據(jù)設計稿而定具體如下編譯新加由于設計稿是添加到里面省略項目中使用假設設計稿和分別是，具體代碼 1.下載lib-flexible npm i lib-flexible --save 或 yarn add lib-flexible 2.在項目中引入lib-flexible 一般情況在...

    Heier 評論0 收藏0

  • vue和vue-cli構(gòu)建使用 px2rem-loader ,全局自動轉(zhuǎn)換px單位,完美解決引入第三

    摘要：使用的小伙伴兒會用到淘寶的開源的適配方案去輕松的完成適配，這也是我最喜歡的，但是使用這個方案時，你引入第三方庫時樣式會變小。。這個坑難的我不行，各種百度，各種想法，差一點就放棄了這個方案。 最近公司的的項目趕，作為前端的小白懶出新的高度，使出專業(yè)的技能 --復制粘貼?。。ǜ膭e人的代碼也是煎熬）我經(jīng)常做一些H5頁面，這樣就會遇到適配這個頭疼的問題，我分享下我用經(jīng)常用到的適配方案： 這里...

    CodeSheep 評論0 收藏0

  • vue和vue-cli構(gòu)建使用 px2rem-loader ,全局自動轉(zhuǎn)換px單位,完美解決引入第三

    摘要：使用的小伙伴兒會用到淘寶的開源的適配方案去輕松的完成適配，這也是我最喜歡的，但是使用這個方案時，你引入第三方庫時樣式會變小。。這個坑難的我不行，各種百度，各種想法，差一點就放棄了這個方案。 最近公司的的項目趕，作為前端的小白懶出新的高度，使出專業(yè)的技能 --復制粘貼?。。ǜ膭e人的代碼也是煎熬）我經(jīng)常做一些H5頁面，這樣就會遇到適配這個頭疼的問題，我分享下我用經(jīng)常用到的適配方案： 這里...

    monw3c 評論0 收藏0

  • vue和vue-cli構(gòu)建使用 px2rem-loader ,全局自動轉(zhuǎn)換px單位,完美解決引入第三

    摘要：使用的小伙伴兒會用到淘寶的開源的適配方案去輕松的完成適配，這也是我最喜歡的，但是使用這個方案時，你引入第三方庫時樣式會變小。。這個坑難的我不行，各種百度，各種想法，差一點就放棄了這個方案。 最近公司的的項目趕，作為前端的小白懶出新的高度，使出專業(yè)的技能 --復制粘貼?。。ǜ膭e人的代碼也是煎熬）我經(jīng)常做一些H5頁面，這樣就會遇到適配這個頭疼的問題，我分享下我用經(jīng)常用到的適配方案： 這里...

    loostudy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<