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

資訊專欄INFORMATION COLUMN

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

monw3c / 1457人閱讀

摘要：使用的小伙伴兒會用到淘寶的開源的適配方案去輕松的完成適配，這也是我最喜歡的，但是使用這個方案時，你引入第三方庫時樣式會變小。。這個坑難的我不行，各種百度，各種想法，差一點就放棄了這個方案。

最近公司的的項目趕，作為前端的小白懶出新的高度，使出專業(yè)的技能 --復(fù)制粘貼?。。ǜ膭e人的代碼也是煎熬）
我經(jīng)常做一些H5頁面，這樣就會遇到適配這個頭疼的問題，我分享下我用經(jīng)常用到的適配方案：
這里就不細(xì)說了 有大神總結(jié) ，或者自行百度。

了解真實的『REM』手機屏幕適配

前端：『REM』手機屏幕高清適配方案

hotcss.js移動端適配方案

這個文章也不錯

都是大神們智慧的結(jié)晶。。。。。。仰望！?。。?！

好了廢話少說進入正題。
使用vue的小伙伴兒會用到淘寶的開源的適配方案flexible.js + rem + px2rem-loader 去輕松的完成適配，這也是我最喜歡的，但是使用這個方案時，你引入第三方庫時 樣式會變小。。？！?。?/p>

這個坑難的我不行，各種百度，各種想法，差一點就放棄了這個方案。

問題

變小的主要原因是第三庫 css一依據(jù) data-dpr="1" 時寫的尺寸

這時我們使用的flexible引入時 data-dpr不是一個寫死了的，是一個動態(tài)的；就導(dǎo)致這個問題

解決
我們可以把第三方庫的css代碼px統(tǒng)一擴大2倍，聽起來很蠢對吧，我一開始也是折磨想的，有的小伙伴就該說這個的改多少，代碼少就無所謂，可是代碼不就的累死了。。。
我使用的地vscode這個編輯器有個擴展程序小叫 px-to-rem 這個可算是救世主了 他可以讓你在2分鐘改完所有的代碼

第一步 下載 改默認(rèn)配置

 "px-to-rem.px-per-rem": 0.5, // 第一步  主要是讓1rem 等于0.5px

全選你要改的代碼 option+Z 快捷鍵。（windows我不知道）你會發(fā)現(xiàn)所有的px變rem

第二步 改默認(rèn)配置

"px-to-rem.px-per-rem": 1,  //第二步

然后在全選你要改的代碼 option+Z 快捷鍵。（windows我不知道）你會發(fā)現(xiàn)所有的rem變px 這個px的值比是原來的2倍


OKok OK

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

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

相關(guān)文章

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

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

    CodeSheep 評論0 收藏0

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

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

    loostudy 評論0 收藏0

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

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

    AWang 評論0 收藏0

  • vue中使用第三方UI庫的移動端rem適配方案

    摘要：需求使用腳手架搭建項目，并且使用第三方的庫比如，的時候，因為第三方庫用的都是用單位，無法使用適配不同設(shè)備的屏幕。解決辦法使用插件將第三方庫的轉(zhuǎn)換成單位。否則會出現(xiàn)混亂頁面。 需求：使用vue-cli腳手架搭建項目，并且使用第三方的UI庫（比如vant，mint ui）的時候，因為第三方庫用的都是用px單位，無法使用rem適配不同設(shè)備的屏幕。 解決辦法：使用px2rem-loader插件...

    littleGrow 評論0 收藏0

發(fā)表評論

0條評論

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