vue3 實現web網頁不同分辨率適配
首先這個標題可能不是特別的合適,之前開發了一個網站,那個網站是類似于官網的效果,按照 19201080100% 的分辨率進行開發的,但是在開發完成之后,發現有的電腦是 19201080125% 的大小展示的,這樣的話,有些地方可能展示就會出一些問題。當然了可以用第三方的一些插件進行處理,也可以自己想辦法處理一下,這篇博文就是靠自己處理,簡單寫一下思路。
內容
首先,最顯而易見的操作就是開發的過程中盡可能用彈性盒子
布局,組建頁面的時候盡可能使用百分比
布局。其次,在設置文本大小、間距這類的數據時候,需要使用 rem
進行設置,而不是 px
。
這里推薦一個 vscode
編輯器好用的 rem
轉換工具,叫 “px to rem & rpx & vw (cssrem)
”。
這個插件還是可以的!
然后呢,做完了這些的話,就簡單了,我們在加載完頁面的時候,先判斷一下,這個瀏覽器的寬度是不是 1920
的,因為我們是按照寬度是 1920
的分辨率開發適配的,如果不是的話,我們需要根據當前的寬度,結合我們設計的比例,重新算一下,當前需要給html設置的 font-size
大小是多少(默認是16px
)。然后就可以啦!‘
// APP.vue
onMounted(() => {let docEl = document.documentElement;let clientWidth = docEl.clientWidth;docEl.style.fontSize = 16 * (clientWidth / 1920) + 'px';
});
這樣在我們打開頁面的時候他會計算當前頁面寬度與設計圖寬度1920的比例,然后重新設置html標簽的font-size屬性值
。
這樣我們的頁面就可以拉回到設計圖的大小了。
問題
這樣實現的話存在一些問題:
- 網頁中的 px 單位需要改成
rem
單位,如果開發沒考慮,后期修改任務量會很大; - 對于一些第三方組件可能無法實現適配,因為三方插件中內部使用的單位為
px
;