資訊專欄INFORMATION COLUMN
摘要：使用的小伙伴兒會用到淘寶的開源的適配方案去輕松的完成適配，這也是我最喜歡的，但是使用這個方案時，你引入第三方庫時樣式會變小。。這個坑難的我不行，各種百度，各種想法，差一點就放棄了這個方案。
最近公司的的項目趕，作為前端的小白懶出新的高度，使出專業的技能 --復制粘貼！！（改別人的代碼也是煎熬）
我經常做一些H5頁面，這樣就會遇到適配這個頭疼的問題，我分享下我用經常用到的適配方案：
這里就不細說了 有大神總結 ，或者自行百度。
了解真實的『REM』手機屏幕適配
前端：『REM』手機屏幕高清適配方案
hotcss.js移動端適配方案
這個文章也不錯
都是大神們智慧的結晶。。。。。。仰望！！！！！
好了廢話少說進入正題。
使用vue的小伙伴兒會用到淘寶的開源的適配方案flexible.js + rem + px2rem-loader 去輕松的完成適配，這也是我最喜歡的，但是使用這個方案時，你引入第三方庫時 樣式會變小。。？！！！
這個坑難的我不行，各種百度，各種想法，差一點就放棄了這個方案。
問題
變小的主要原因是第三庫 css一依據 data-dpr="1" 時寫的尺寸
這時我們使用的flexible引入時 data-dpr不是一個寫死了的，是一個動態的；就導致這個問題
解決
我們可以把第三方庫的css代碼px統一擴大2倍，聽起來很蠢對吧，我一開始也是折磨想的，有的小伙伴就該說這個的改多少，代碼少就無所謂，可是代碼不就的累死了。。。
我使用的地vscode這個編輯器有個擴展程序小叫 px-to-rem 這個可算是救世主了 他可以讓你在2分鐘改完所有的代碼
第一步 下載 改默認配置
"px-to-rem.px-per-rem": 0.5, // 第一步 主要是讓1rem 等于0.5px
全選你要改的代碼 option+Z 快捷鍵。（windows我不知道）你會發現所有的px變rem
第二步 改默認配置
"px-to-rem.px-per-rem": 1, //第二步
然后在全選你要改的代碼 option+Z 快捷鍵。（windows我不知道）你會發現所有的rem變px 這個px的值比是原來的2倍
OKok OK
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94585.html
摘要：使用的小伙伴兒會用到淘寶的開源的適配方案去輕松的完成適配，這也是我最喜歡的，但是使用這個方案時，你引入第三方庫時樣式會變小。。這個坑難的我不行，各種百度，各種想法，差一點就放棄了這個方案。 最近公司的的項目趕，作為前端的小白懶出新的高度，使出專業的技能 --復制粘貼！！（改別人的代碼也是煎熬）我經常做一些H5頁面，這樣就會遇到適配這個頭疼的問題，我分享下我用經常用到的適配方案： 這里...
摘要：使用的小伙伴兒會用到淘寶的開源的適配方案去輕松的完成適配，這也是我最喜歡的，但是使用這個方案時，你引入第三方庫時樣式會變小。。這個坑難的我不行，各種百度，各種想法，差一點就放棄了這個方案。 最近公司的的項目趕，作為前端的小白懶出新的高度，使出專業的技能 --復制粘貼！！（改別人的代碼也是煎熬）我經常做一些H5頁面，這樣就會遇到適配這個頭疼的問題，我分享下我用經常用到的適配方案： 這里...
摘要：做移動端時，適配是必須的。使用單位，可在不同屏幕上完美顯示相同的布局。文件首先要把轉成正常的，在交給來做，所以是外還需要加上一個設計稿寬度表示轉換過程小數保留幾位。安裝配置結束后，重啟項目。會發現自己設置的被轉為了。 做移動端時，適配 是必須的。使用rem單位，可在不同屏幕上完美顯示相同的布局。px2rem 插件方便的將px單位轉為了rem。 1. 自己手動構建vue webpck配置...
摘要：需求使用腳手架搭建項目，并且使用第三方的庫比如，的時候，因為第三方庫用的都是用單位，無法使用適配不同設備的屏幕。解決辦法使用插件將第三方庫的轉換成單位。否則會出現混亂頁面。 需求：使用vue-cli腳手架搭建項目，并且使用第三方的UI庫（比如vant，mint ui）的時候，因為第三方庫用的都是用px單位，無法使用rem適配不同設備的屏幕。 解決辦法：使用px2rem-loader插件...
閱讀 978·2021-11-04 16:08
閱讀 2958·2021-09-13 10:37
閱讀 493·2019-08-30 15:56
閱讀 1928·2019-08-30 15:55
閱讀 2226·2019-08-30 15:53
閱讀 2071·2019-08-30 13:13
閱讀 2908·2019-08-30 12:51
閱讀 1532·2019-08-29 16:06
