資訊專欄INFORMATION COLUMN
摘要：做移動端時，適配是必須的。使用單位，可在不同屏幕上完美顯示相同的布局。文件首先要把轉成正常的，在交給來做，所以是外還需要加上一個設計稿寬度表示轉換過程小數保留幾位。安裝配置結束后，重啟項目。會發現自己設置的被轉為了。
做移動端時，適配 是必須的。使用rem單位，可在不同屏幕上完美顯示相同的布局。px2rem 插件方便的將px單位轉為了rem。
1. 自己手動構建vue webpck配置我們在開發過程中，我們在css文件中，直接按設計稿，直接以px像素為單位，然后在真正的應用中，我們想讓px自動轉制為rem單位，那這個要怎么讓構建工具自動轉換呢？
大家想一下，我們的構建工具，其實最主要還是來自vue，vue這個文件中我們使用了vue-loader,那如果說你使用了vue-cli腳手架的話，那么你想增加這個功能，并不簡單，但是我們手工打造構建工具，就不受限制，想怎么用就怎么用，按照剛才的思路，我們知道，所有的文件幾乎是vue文件，所有的loader是vue-loader。
在webpack配置，我們一個文件可以使用多個loader, 我們使用vue-loader也可以用其它loader，那怎么用呢？這就要去看vue官方文檔了。
這邊我為大家找到這個文檔
通過官方文檔，我們可以了解到，要使用sass-loader,要需要在vue-loader中，增加一個options進行相應的配置就可以使用對應的loader了。
我們現在要做的是能自動將px轉換成rem,所以跟這也有相似類，只要我們將轉換的loader添加進行就可以了，那能將px自動轉換成rem是哪個loader呢？
那我們要怎么找呢？當我們不會的時候，可以到npm.js官網，然后可以猜想一到輸入px, rem,一回車就可以看到
從圖中我們可以看到有個px2rem2-loader，下面還有一個px2rem，我們直接搜索px2rem
這種loader有多個，平常我們用的比較多的還是px2rem，所以這邊 就介紹px2rem，其它loader可以自行研究噢！點擊進去我們可以發現
里面有介紹我們怎么安裝，以及怎么引入，我們可以模仿vue官網的寫法
如上圖,我們主要注意幾點
loader解析順序是按從右到左的方法解析的。
px2rem官網是沒有帶后綴.loader,webpack2.0之后是沒允許的，所以這邊我們要加上后綴。
scss文件首先要把scss轉成正常的css，在交給px2rem.loader來做，所以是外還需要加上一個sass-loader
remUnit: 750//設計稿寬度/10,remPrecision:表示轉換過程小數保留幾位。
2. 使用vue-cli構建px2rem.loader 1）.下載lib-flexible我使用的是vue-cli+webpack，所以是通過npm來安裝的
npm i lib-flexible --save2）引入lib-flexible
在main.js中引入lib-flexible
import "lib-flexible/flexible"3) 安裝px2rem-loader
npm install px2rem-loader4).配置px2rem-loader
在build下的 utils.js中，找到generateLoaders 方法，在這里添加 。
安裝配置結束后，重啟項目 。然后再瀏覽器中查看。會發現自己設置的px被轉為rem 了。
愿你成為終身學習者
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115894.html
摘要：使用的小伙伴兒會用到淘寶的開源的適配方案去輕松的完成適配，這也是我最喜歡的，但是使用這個方案時，你引入第三方庫時樣式會變小。。這個坑難的我不行，各種百度，各種想法，差一點就放棄了這個方案。 最近公司的的項目趕，作為前端的小白懶出新的高度，使出專業的技能 --復制粘貼！！（改別人的代碼也是煎熬）我經常做一些H5頁面，這樣就會遇到適配這個頭疼的問題，我分享下我用經常用到的適配方案： 這里...
摘要：使用的小伙伴兒會用到淘寶的開源的適配方案去輕松的完成適配，這也是我最喜歡的，但是使用這個方案時，你引入第三方庫時樣式會變小。。這個坑難的我不行，各種百度，各種想法，差一點就放棄了這個方案。 最近公司的的項目趕，作為前端的小白懶出新的高度，使出專業的技能 --復制粘貼！！（改別人的代碼也是煎熬）我經常做一些H5頁面，這樣就會遇到適配這個頭疼的問題，我分享下我用經常用到的適配方案： 這里...
摘要：使用的小伙伴兒會用到淘寶的開源的適配方案去輕松的完成適配，這也是我最喜歡的，但是使用這個方案時，你引入第三方庫時樣式會變小。。這個坑難的我不行，各種百度，各種想法，差一點就放棄了這個方案。 最近公司的的項目趕，作為前端的小白懶出新的高度，使出專業的技能 --復制粘貼！！（改別人的代碼也是煎熬）我經常做一些H5頁面，這樣就會遇到適配這個頭疼的問題，我分享下我用經常用到的適配方案： 這里...
摘要：一般需用這個在后面添加會根據的不同，生成三套代碼。如果明白了這些方法，就沒必要再配置的了，因為下面的方法更容易控制外部引入的是否需要轉，而更改就控制不了了，它會強制轉換。能正常轉換不能正常轉換不能正常轉換 基于vue-cli配置手淘的lib-flexible + rem，實現移動端自適應 沒接觸過flexible的建議先看看大漠的這篇文章這樣你才會知道長度為什么用rem，而字體要用px...
摘要：下載或在項目中引入一般情況在中引入設置標簽視情況而定安裝或在中配置，在項目文件中找到，將添加到中，，下的根據設計稿而定具體如下編譯新加由于設計稿是添加到里面省略項目中使用假設設計稿和分別是，具體代碼 1.下載lib-flexible npm i lib-flexible --save 或 yarn add lib-flexible 2.在項目中引入lib-flexible 一般情況在...
閱讀 2737·2021-10-09 09:44
閱讀 3550·2019-08-30 15:54
閱讀 2160·2019-08-30 14:16
閱讀 2790·2019-08-30 13:09
閱讀 825·2019-08-30 13:08
閱讀 1280·2019-08-29 16:29
閱讀 1661·2019-08-26 13:57
閱讀 1925·2019-08-26 13:53
