前情

最近打算寫幾個大屏，作為后續(xù)工作的一個簡歷吧。畢竟現(xiàn)在技術類的找工作不單單的是得會忽悠，還得有點兒作品。

怎么好像在說UI崗一樣，在網(wǎng)上扒了扒效果，想要寫的炫酷一些，頁面開發(fā)完了以后在公司給一哥們演示的時候拉跨了。

家里的電腦屏幕本身是2K的，而公司里的是普通的1080p的。

原本在家里適配的非常好的頁面在公司非常別扭，而且大量的寬度、高度、字體因為是寫死的，在1080p的屏幕上出現(xiàn)了換行。

唉，百密一疏??！頁面效果、動畫展示、數(shù)據(jù)加載等等都考慮到了，就是沒考慮屏幕兼容...

方案選擇

緊急調(diào)研了一下，現(xiàn)在比較主流的兼容方案一般有以下幾種：

1. 相對單位適配：

• 使用相對單位如vw、vh、vmin、vmax，這些單位會根據(jù)屏幕的寬度和高度進行適配，從而實現(xiàn)不同屏幕下的適配。
• 但是問題在于這種情況下可能出現(xiàn)小屏幕擁擠、大屏幕空曠的問題。

2. 媒體查詢適配：

• 通過媒體查詢（@media）來實現(xiàn)不同屏幕下的適配。各種屏幕都考慮到了，并且針對性的進行優(yōu)化，能夠保證效果相對來說處于最佳。
• 但是問題在于，如果要兼容的屏幕很多，那么代碼就會很復雜，并且容易出錯。

3. 縮放適配

• 通過使用transform: scale() 來實現(xiàn)不同屏幕下的適配。簡單快捷，幾乎不用額外的考慮極端情況。
• 但是問題在于，縮放后的頁面可能不太好看。尤其是特殊屏幕可能會出現(xiàn)大黑邊的情況。

層層篩選還是打斷用相對單位做，但是可以使用 less 函數(shù)來簡化這個過程。

簡單地說就是使用 less 函數(shù)讓他在編譯過程中自動的將 px 轉(zhuǎn)化為 vw/vh，實現(xiàn)相對比較完美的顯示效果。

代碼開發(fā)

1. 首先安裝 less

npm i less --save-dev

2. 創(chuàng)建一個util.less作為工具函數(shù)

@charset "utf-8";

// 默認設計稿的寬度
@designWidth: 1920;

// 默認設計稿的高度
@designHeight: 1080;

// px 轉(zhuǎn) vw
.px2vw(@name, @px) {
  @{name}: (@px / @designWidth) * 100vw;
}

// px 轉(zhuǎn) vh
.px2vh(@name, @px) {
  @{name}: (@px / @designHeight) * 100vh;
}

3. 在vite中使用 preprocessorOptions 為每個less插入工具函數(shù)

export default defineConfig({
    css: {
        preprocessorOptions: {
            less: {
                additionalData: `@import "@/assets/css/utils.less";`
            }
        }
    }
})

4. 在 vue 中使用

<style scope lang='less'>
    .card {
        .px2vw(width, 400);
        .px2vh(height, 300);
    }
</style>

總結

非常簡單的一個小方案，但是卻實現(xiàn)了相當不錯的效果。適配上來說也還算比較的好吧，但是肯定是不如媒體查詢那么完美。

不過從實現(xiàn)上來說比媒體查詢的難度下降了不是一個量級。

最大的難度或許來自于你在 css 中寫 .px2vw(width, 200) 這種別扭的感覺。

到此這篇關于vite框架下大屏適配方案小結的文章就介紹到這了,更多相關vite 大屏適配內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論