前端開發(fā)中，在做pc端的全屏頁面時，怎樣進行適配呢？
時間：2024-02-08 09:20:01 | 來源：網(wǎng)站運營
時間：2024-02-08 09:20:01 來源：網(wǎng)站運營
前端開發(fā)中，在做pc端的全屏頁面時，怎樣進行適配呢？：寫過幾個投屏的項目，簡單分享一下思路，目前解決這類全屏適配問題（據(jù)我所知）沒有很完美的方法，難點在于全屏的寬高比不確定，得從設(shè)計上去避坑。
以下方案都是基于rem響應(yīng)式的前提：
方案一：固定比例并保證能夠完整展示也就是以設(shè)計稿的比例為準，以整體縮小或者放大的形式將設(shè)計稿還原到頁面的中心區(qū)域，內(nèi)容能夠完整展示。
優(yōu)點是在于適配簡單，不需要過多地細節(jié)調(diào)整和轉(zhuǎn)換，而且維護很方便。
缺點是大部分情況下頁面會有留白區(qū)域，除非顯示屏的比例剛剛好與設(shè)計稿一致。
方案二：同比例拉伸寬高我們簡單地將模塊的長度單位由rem換算為百分比就可以實現(xiàn)，或者，大部分情況下我們會采用flex布局，可以簡化很多操作而且便于理解維護。
優(yōu)點是內(nèi)容可以完全展示并且頁面沒有多余的留白，顯得很“充實”，給人一種“為我量身定制”的感覺。
缺點是換算稍嫌麻煩，需要頻繁與設(shè)計師溝通；因為尺寸不確定，所以顯示效果也沒辦法保證，比如橫屏的設(shè)計被用戶投在豎屏上，效果一般不會好。還有一個問題就是維護麻煩，設(shè)計上增減一個模塊都有可能打破原有的平衡，使得某個尺寸的屏幕本來能夠良好展示，改完就變糟糕了。
方案三：媒介查詢實現(xiàn)動態(tài)布局用過bootstrap應(yīng)該都知道它的柵格布局，可以實現(xiàn)在不同的分辨率下動態(tài)切換布局以適應(yīng)當前。
優(yōu)點是很大程度上減少了方案二的不確定性，把原本無數(shù)的屏幕尺寸簡化為可預見的若干種尺寸邊界。
缺點是工作量大，單單設(shè)計稿，我們就需要不同尺寸各出一套，然后開發(fā)各一套，至于維護，對設(shè)計師對開發(fā)者那都是體力活了。
這幾個方案里，要是能用方案一就用方案一，實在不行就方案二，不推薦方案三，我自己也沒有實現(xiàn)過。所以方案三最好別跟產(chǎn)品經(jīng)理提起，沒有技術(shù)背景的產(chǎn)品經(jīng)理是不會懂什么是“可維護性”。
在線咨詢