資訊專欄INFORMATION COLUMN
摘要：做移動(dòng)端時(shí)，適配是必須的。使用單位，可在不同屏幕上完美顯示相同的布局。文件首先要把轉(zhuǎn)成正常的，在交給來(lái)做，所以是外還需要加上一個(gè)設(shè)計(jì)稿寬度表示轉(zhuǎn)換過(guò)程小數(shù)保留幾位。安裝配置結(jié)束后，重啟項(xiàng)目。會(huì)發(fā)現(xiàn)自己設(shè)置的被轉(zhuǎn)為了。
做移動(dòng)端時(shí)，適配 是必須的。使用rem單位，可在不同屏幕上完美顯示相同的布局。px2rem 插件方便的將px單位轉(zhuǎn)為了rem。
1. 自己手動(dòng)構(gòu)建vue webpck配置我們?cè)陂_(kāi)發(fā)過(guò)程中，我們?cè)赾ss文件中，直接按設(shè)計(jì)稿，直接以px像素為單位，然后在真正的應(yīng)用中，我們想讓px自動(dòng)轉(zhuǎn)制為rem單位，那這個(gè)要怎么讓構(gòu)建工具自動(dòng)轉(zhuǎn)換呢？
大家想一下，我們的構(gòu)建工具，其實(shí)最主要還是來(lái)自vue，vue這個(gè)文件中我們使用了vue-loader,那如果說(shuō)你使用了vue-cli腳手架的話，那么你想增加這個(gè)功能，并不簡(jiǎn)單，但是我們手工打造構(gòu)建工具，就不受限制，想怎么用就怎么用，按照剛才的思路，我們知道，所有的文件幾乎是vue文件，所有的loader是vue-loader。
在webpack配置，我們一個(gè)文件可以使用多個(gè)loader, 我們使用vue-loader也可以用其它loader，那怎么用呢？這就要去看vue官方文檔了。
這邊我為大家找到這個(gè)文檔
通過(guò)官方文檔，我們可以了解到，要使用sass-loader,要需要在vue-loader中，增加一個(gè)options進(jìn)行相應(yīng)的配置就可以使用對(duì)應(yīng)的loader了。
我們現(xiàn)在要做的是能自動(dòng)將px轉(zhuǎn)換成rem,所以跟這也有相似類，只要我們將轉(zhuǎn)換的loader添加進(jìn)行就可以了，那能將px自動(dòng)轉(zhuǎn)換成rem是哪個(gè)loader呢？
那我們要怎么找呢？當(dāng)我們不會(huì)的時(shí)候，可以到npm.js官網(wǎng)，然后可以猜想一到輸入px, rem,一回車就可以看到
從圖中我們可以看到有個(gè)px2rem2-loader，下面還有一個(gè)px2rem，我們直接搜索px2rem
這種loader有多個(gè)，平常我們用的比較多的還是px2rem，所以這邊 就介紹px2rem，其它loader可以自行研究噢！點(diǎn)擊進(jìn)去我們可以發(fā)現(xiàn)
里面有介紹我們?cè)趺窗惭b，以及怎么引入，我們可以模仿vue官網(wǎng)的寫法
如上圖,我們主要注意幾點(diǎn)
loader解析順序是按從右到左的方法解析的。
px2rem官網(wǎng)是沒(méi)有帶后綴.loader,webpack2.0之后是沒(méi)允許的，所以這邊我們要加上后綴。
scss文件首先要把scss轉(zhuǎn)成正常的css，在交給px2rem.loader來(lái)做，所以是外還需要加上一個(gè)sass-loader
remUnit: 750//設(shè)計(jì)稿寬度/10,remPrecision:表示轉(zhuǎn)換過(guò)程小數(shù)保留幾位。
2. 使用vue-cli構(gòu)建px2rem.loader 1）.下載lib-flexible我使用的是vue-cli+webpack，所以是通過(guò)npm來(lái)安裝的
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 方法，在這里添加 。
安裝配置結(jié)束后，重啟項(xiàng)目 。然后再瀏覽器中查看。會(huì)發(fā)現(xiàn)自己設(shè)置的px被轉(zhuǎn)為rem 了。
愿你成為終身學(xué)習(xí)者
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115894.html
摘要：使用的小伙伴兒會(huì)用到淘寶的開(kāi)源的適配方案去輕松的完成適配，這也是我最喜歡的，但是使用這個(gè)方案時(shí)，你引入第三方庫(kù)時(shí)樣式會(huì)變小。。這個(gè)坑難的我不行，各種百度，各種想法，差一點(diǎn)就放棄了這個(gè)方案。 最近公司的的項(xiàng)目趕，作為前端的小白懶出新的高度，使出專業(yè)的技能 --復(fù)制粘貼?。。ǜ膭e人的代碼也是煎熬）我經(jīng)常做一些H5頁(yè)面，這樣就會(huì)遇到適配這個(gè)頭疼的問(wèn)題，我分享下我用經(jīng)常用到的適配方案： 這里...
摘要：使用的小伙伴兒會(huì)用到淘寶的開(kāi)源的適配方案去輕松的完成適配，這也是我最喜歡的，但是使用這個(gè)方案時(shí)，你引入第三方庫(kù)時(shí)樣式會(huì)變小。。這個(gè)坑難的我不行，各種百度，各種想法，差一點(diǎn)就放棄了這個(gè)方案。 最近公司的的項(xiàng)目趕，作為前端的小白懶出新的高度，使出專業(yè)的技能 --復(fù)制粘貼?。。ǜ膭e人的代碼也是煎熬）我經(jīng)常做一些H5頁(yè)面，這樣就會(huì)遇到適配這個(gè)頭疼的問(wèn)題，我分享下我用經(jīng)常用到的適配方案： 這里...
摘要：使用的小伙伴兒會(huì)用到淘寶的開(kāi)源的適配方案去輕松的完成適配，這也是我最喜歡的，但是使用這個(gè)方案時(shí)，你引入第三方庫(kù)時(shí)樣式會(huì)變小。。這個(gè)坑難的我不行，各種百度，各種想法，差一點(diǎn)就放棄了這個(gè)方案。 最近公司的的項(xiàng)目趕，作為前端的小白懶出新的高度，使出專業(yè)的技能 --復(fù)制粘貼?。。ǜ膭e人的代碼也是煎熬）我經(jīng)常做一些H5頁(yè)面，這樣就會(huì)遇到適配這個(gè)頭疼的問(wèn)題，我分享下我用經(jīng)常用到的適配方案： 這里...
摘要：一般需用這個(gè)在后面添加會(huì)根據(jù)的不同，生成三套代碼。如果明白了這些方法，就沒(méi)必要再配置的了，因?yàn)橄旅娴姆椒ǜ菀卓刂仆獠恳氲氖欠裥枰D(zhuǎn)，而更改就控制不了了，它會(huì)強(qiáng)制轉(zhuǎn)換。能正常轉(zhuǎn)換不能正常轉(zhuǎn)換不能正常轉(zhuǎn)換 基于vue-cli配置手淘的lib-flexible + rem，實(shí)現(xiàn)移動(dòng)端自適應(yīng) 沒(méi)接觸過(guò)flexible的建議先看看大漠的這篇文章這樣你才會(huì)知道長(zhǎng)度為什么用rem，而字體要用px...
摘要：下載或在項(xiàng)目中引入一般情況在中引入設(shè)置標(biāo)簽視情況而定安裝或在中配置，在項(xiàng)目文件中找到，將添加到中，，下的根據(jù)設(shè)計(jì)稿而定具體如下編譯新加由于設(shè)計(jì)稿是添加到里面省略項(xiàng)目中使用假設(shè)設(shè)計(jì)稿和分別是，具體代碼 1.下載lib-flexible npm i lib-flexible --save 或 yarn add lib-flexible 2.在項(xiàng)目中引入lib-flexible 一般情況在...
閱讀 2755·2021-10-09 09:44
閱讀 3561·2019-08-30 15:54
閱讀 2171·2019-08-30 14:16
閱讀 2803·2019-08-30 13:09
閱讀 835·2019-08-30 13:08
閱讀 1295·2019-08-29 16:29
閱讀 1680·2019-08-26 13:57
閱讀 1938·2019-08-26 13:53
