流布局與響應(yīng)式網(wǎng)頁設(shè)計有什么區(qū)別？

時間：2023-12-11 07:54:01 | 來源：網(wǎng)站運營

時間：2023-12-11 07:54:01 來源：網(wǎng)站運營

流布局與響應(yīng)式網(wǎng)頁設(shè)計有什么區(qū)別？：早期的Web前端開發(fā)者中流傳著這些描述了CSS編寫方式的名詞：

• 固定布局：顧名思義，網(wǎng)頁上的所有元素的尺寸一律使用px作為單位。這種布局方式對設(shè)計師和CSS編寫者來說都是最簡單的，亦沒有兼容性問題，例如，直接設(shè)定網(wǎng)頁的主體部分寬度為960px，某個搜索框?qū)挾葹?0px等等。缺點顯而易見，即不能根據(jù)用戶的屏幕尺寸做出不同的表現(xiàn)。當前，大部分門戶網(wǎng)站、大部分企業(yè)的PC宣傳站點都采用了這種布局方式。

在移動端開發(fā)中其實也可以采用固定布局，以下列出兩種方式：

1. 在viewport meta標簽上設(shè)置width=320，頁面的各個元素也采用px作為單位。通過用JS動態(tài)修改標簽的initial-scale使得頁面等比縮放，從而剛好占滿整個屏幕。（見前端開發(fā)-web app 變革之rem）
2. 設(shè)在viewport meta標簽上設(shè)置content"width=640,user-scalable=no，頁面的各個元素也采用px作為單位。由于640px超出了手機寬度，瀏覽器會自動縮小頁面至剛好全屏。（具體見content"width=640,user-scalable=no" 然后再進行固定尺寸的px設(shè)計？ - 前端開發(fā)）

• 流式布局：網(wǎng)頁中主要的劃分區(qū)域的尺寸使用百分數(shù)（搭配min-*、max-*屬性使用），例如，設(shè)置網(wǎng)頁主體的寬度為80%，min-width為960px。圖片也作類似處理（width:100%, max-width一般設(shè)定為圖片本身的尺寸，防止被拉伸而失真）。這種布局方式在Web前端開發(fā)的早期歷史上，用來應(yīng)對不同尺寸的PC屏幕（那是屏幕尺寸的差異不會太大），在當今的移動端開發(fā)也是常用布局方式，但缺點明顯：寬度使用百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”），顯示非常不協(xié)調(diào)。

• 彈性布局：這類布局的特點是，包裹文字的各元素的尺寸采用em做單位，而頁面的主要劃分區(qū)域的尺寸仍使用百分數(shù)或px做單位（同「流式布局」或「固定布局」）。早期瀏覽器不支持整個頁面按比例縮放，僅支持網(wǎng)頁內(nèi)文字尺寸的放大，這種情況下。使用em做單位，可以使包裹文字的元素隨著文字的縮放而縮放。在那時，為了使單位em更直觀，CSS編寫者常常把body元素的font-size設(shè)置為62.5%（瀏覽器默認字體大小16px*62.5%=10px），這樣1em便是10px，方便了計算。在PC端使用彈性布局的另一個理由（也許是2016年的今天的唯一的理由）可以看看EM單位的好處是什么? - 前端開發(fā)

使用了rem單位的彈性布局在移動端也很受歡迎。對于不同尺寸的屏幕，可以統(tǒng)一假設(shè)屏幕寬度為640px后編寫CSS（這只是一個例子。當然你也可以假定統(tǒng)一為320px）。此時，我們設(shè)定html元素的font-size為40px（同樣，只是舉例），然后各處（元素尺寸、文字大?。┦褂胷em作為單位，隨后搭配媒體查詢或JS，根據(jù)屏幕的大小來動態(tài)控制html元素的font-size（特定屏幕尺寸下，html元素的font-size應(yīng)當設(shè)置為何值，是使用這個方案時設(shè)計師和程序員需要反復考慮后確定的，以下試舉一段相關(guān)的CSS媒體查詢代碼），即可自動改變所有用rem定義尺寸的元素的大小（且CSS編寫者在腦中進行換算的計算過程比em簡單得多）。

html { font-size : 20px;}@media only screen and (min-width: 401px){ html { font-size: 25px !important; }}@media only screen and (min-width: 428px){ html { font-size: 26.75px !important; }}@media only screen and (min-width: 481px){ html { font-size: 30px !important; }}@media only screen and (min-width: 569px){ html { font-size: 35px !important; }}@media only screen and (min-width: 641px){ html { font-size: 40px !important; }}其實在移動端使用所謂的彈性布局，是比較勉強的。移動端彈性布局流行起來的原因歸根結(jié)底是rem單位對于（根據(jù)屏幕尺寸）調(diào)整頁面的各元素的尺寸、文字大小時比較好用。其實，使用vw、vh等后起之秀的單位，可以實現(xiàn)完美的流式布局（高度和文字大小都可以變得“流式”），彈性布局就不再必要了。

• 隨著CSS3出現(xiàn)了媒體查詢技術(shù)，又出現(xiàn)了響應(yīng)式設(shè)計的概念。響應(yīng)式設(shè)計的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、手表、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果，對CSS編寫者而言，在實現(xiàn)上不拘泥于具體手法，但通常是糅合了流式布局+彈性布局，再搭配媒體查詢技術(shù)使用。