資訊專欄INFORMATION COLUMN
摘要：使用的小伙伴兒會(huì)用到淘寶的開源的適配方案去輕松的完成適配，這也是我最喜歡的，但是使用這個(gè)方案時(shí)，你引入第三方庫時(shí)樣式會(huì)變小。。這個(gè)坑難的我不行，各種百度，各種想法，差一點(diǎn)就放棄了這個(gè)方案。
最近公司的的項(xiàng)目趕，作為前端的小白懶出新的高度，使出專業(yè)的技能 --復(fù)制粘貼?。。ǜ膭e人的代碼也是煎熬）
我經(jīng)常做一些H5頁面，這樣就會(huì)遇到適配這個(gè)頭疼的問題，我分享下我用經(jīng)常用到的適配方案：
這里就不細(xì)說了 有大神總結(jié) ，或者自行百度。
了解真實(shí)的『REM』手機(jī)屏幕適配
前端：『REM』手機(jī)屏幕高清適配方案
hotcss.js移動(dòng)端適配方案
這個(gè)文章也不錯(cuò)
都是大神們智慧的結(jié)晶。。。。。。仰望！?。。。?/p>
好了廢話少說進(jìn)入正題。
使用vue的小伙伴兒會(huì)用到淘寶的開源的適配方案flexible.js + rem + px2rem-loader 去輕松的完成適配，這也是我最喜歡的，但是使用這個(gè)方案時(shí)，你引入第三方庫時(shí) 樣式會(huì)變小。。？?。?！
這個(gè)坑難的我不行，各種百度，各種想法，差一點(diǎn)就放棄了這個(gè)方案。
問題
變小的主要原因是第三庫 css一依據(jù) data-dpr="1" 時(shí)寫的尺寸
這時(shí)我們使用的flexible引入時(shí) data-dpr不是一個(gè)寫死了的，是一個(gè)動(dòng)態(tài)的；就導(dǎo)致這個(gè)問題
解決
我們可以把第三方庫的css代碼px統(tǒng)一擴(kuò)大2倍，聽起來很蠢對(duì)吧，我一開始也是折磨想的，有的小伙伴就該說這個(gè)的改多少，代碼少就無所謂，可是代碼不就的累死了。。。
我使用的地vscode這個(gè)編輯器有個(gè)擴(kuò)展程序小叫 px-to-rem 這個(gè)可算是救世主了 他可以讓你在2分鐘改完所有的代碼
第一步 下載 改默認(rèn)配置
"px-to-rem.px-per-rem": 0.5, // 第一步 主要是讓1rem 等于0.5px
全選你要改的代碼 option+Z 快捷鍵。（windows我不知道）你會(huì)發(fā)現(xiàn)所有的px變r(jià)em
第二步 改默認(rèn)配置
"px-to-rem.px-per-rem": 1, //第二步
然后在全選你要改的代碼 option+Z 快捷鍵。（windows我不知道）你會(huì)發(fā)現(xiàn)所有的rem變px 這個(gè)px的值比是原來的2倍
OKok OK
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52244.html
摘要：使用的小伙伴兒會(huì)用到淘寶的開源的適配方案去輕松的完成適配，這也是我最喜歡的，但是使用這個(gè)方案時(shí)，你引入第三方庫時(shí)樣式會(huì)變小。。這個(gè)坑難的我不行，各種百度，各種想法，差一點(diǎn)就放棄了這個(gè)方案。 最近公司的的項(xiàng)目趕，作為前端的小白懶出新的高度，使出專業(yè)的技能 --復(fù)制粘貼！?。ǜ膭e人的代碼也是煎熬）我經(jīng)常做一些H5頁面，這樣就會(huì)遇到適配這個(gè)頭疼的問題，我分享下我用經(jīng)常用到的適配方案： 這里...
摘要：使用的小伙伴兒會(huì)用到淘寶的開源的適配方案去輕松的完成適配，這也是我最喜歡的，但是使用這個(gè)方案時(shí)，你引入第三方庫時(shí)樣式會(huì)變小。。這個(gè)坑難的我不行，各種百度，各種想法，差一點(diǎn)就放棄了這個(gè)方案。 最近公司的的項(xiàng)目趕，作為前端的小白懶出新的高度，使出專業(yè)的技能 --復(fù)制粘貼?。。ǜ膭e人的代碼也是煎熬）我經(jīng)常做一些H5頁面，這樣就會(huì)遇到適配這個(gè)頭疼的問題，我分享下我用經(jīng)常用到的適配方案： 這里...
摘要：做移動(dòng)端時(shí)，適配是必須的。使用單位，可在不同屏幕上完美顯示相同的布局。文件首先要把轉(zhuǎn)成正常的，在交給來做，所以是外還需要加上一個(gè)設(shè)計(jì)稿寬度表示轉(zhuǎn)換過程小數(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配置...
摘要：需求使用腳手架搭建項(xiàng)目，并且使用第三方的庫比如，的時(shí)候，因?yàn)榈谌綆煊玫亩际怯脝挝?，無法使用適配不同設(shè)備的屏幕。解決辦法使用插件將第三方庫的轉(zhuǎn)換成單位。否則會(huì)出現(xiàn)混亂頁面。 需求：使用vue-cli腳手架搭建項(xiàng)目，并且使用第三方的UI庫（比如vant，mint ui）的時(shí)候，因?yàn)榈谌綆煊玫亩际怯胮x單位，無法使用rem適配不同設(shè)備的屏幕。 解決辦法：使用px2rem-loader插件...
閱讀 4118·2021-09-24 10:24
閱讀 1439·2021-09-22 16:01
閱讀 2752·2021-09-06 15:02
閱讀 1051·2019-08-30 13:01
閱讀 1034·2019-08-30 10:52
閱讀 656·2019-08-29 16:36
閱讀 2266·2019-08-29 12:51
閱讀 2375·2019-08-28 18:29
