css佈局之靜態佈局、自適應佈局、串流佈局、響應式佈局、彈性佈局

（推薦教學：CSS影片教學）

#靜態佈局（Static Layout）

即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。

1、版面特色：不管瀏覽器尺寸具體是多少，網頁佈局總是會依照最初寫程式碼時的佈局來顯示。常規的pc的網站都是靜態（定寬度）佈局的，也就是設定了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見與pc端。

2、設計方法：

• PC：居中佈局，所有樣式使用絕對寬度/高度(px)，設計一個Layout，在螢幕寬高有調整時，使用橫向和垂直的滾動條來查閱被遮掩部分；

• 移動設備：另外建立移動網站，單獨設計一個佈局，使用不同的域名如wap.或m. 。

在行動裝置開發中採用靜態佈局的兩種方式：(來自：串流佈局與響應式網頁設計有什麼區別？)

（1）在viewport meta標籤上設定width=320，頁面的各個元素也都採用px作為單位。透過以JS動態修改標籤的initial-scale使得頁面等比縮放，從而剛好佔滿整個螢幕。 （請參閱前端開發-web app 變革之rem）

（2）設在viewport meta標籤上設定content"width=640,user-scalable=no，頁面的各個元素也採用px作為單位。由於640px超出了手機寬度，瀏覽器會自動縮小頁面至剛好全螢幕。（具體見content"width=640,user-scalable=no" 然後再進行固定尺寸的px設計？ - 前端開發）

• 優點：這種佈局方式對設計師和CSS編寫者來說都是最簡單的，也沒有相容性問題。

• 缺點：顯而易見，即無法根據使用者的螢幕尺寸做出不同的表現。

目前，大部分入口網站、大部分企業的PC宣傳網站都採用了這種佈局方式。固定像素尺寸的網頁是匹配固定像素尺寸顯示器的最簡單方法。但這種方法不是一種完全相容於未來網頁的製作方法，我們需要一些適應未知裝置的方法。

串流式佈局（Liquid Layout）

串流佈局（Liquid）的特點（也稱為"Fluid") 是頁面元素的寬度按照螢幕解析度進行適配調整，但整體佈局不變。代表作柵欄系統（網格系統）。

網頁中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設定網頁主體的寬度為80% ，min-width為960px。圖片也作類似處理（width:100%, max-width一般設定為圖片本身的尺寸，防止被拉伸而失真）。

1、佈局特點：螢幕解析度變化時，頁面裡元素的大小會變化而但佈局不變。【這就導致如果螢幕太大或太小都會導致元素無法正常顯示】

2、設計方法：使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域(viewport) 和父元素的實時尺寸進行調整，盡可能的適應各種分辨率。往往配合max-width/min-width 等屬性控制尺寸流動範圍以免過大或過小影響閱讀。

這種佈局方式在Web前端開發的早期歷史上，用來應對不同尺寸的PC螢幕（那時螢幕尺寸的差異不會太大），在當今的行動端開發也是常用佈局方式，但缺點明顯：主要的問題是如果螢幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的螢幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大螢幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”），顯示非常不協調。

自適應佈局（Adaptive Layout）

#自適應佈局的特點是分別為不同的螢幕解析度定義佈局，即創建多個個靜態佈局，每個靜態佈局對應一個螢幕解析度範圍。改變螢幕解析度可以切換不同的靜態局部（頁面元素位置改變），但在每個靜態佈局中，頁面元素不會隨視窗大小的調整而改變。可以把自適應佈局看成是靜態佈局的一個系列。

1、佈局特點：螢幕解析度改變時，頁裡面元素的位置會改變而大小不會改變。

2、設計方法：使用 @media 媒體查詢為不同尺寸和媒體的裝置切換不同的樣式。在優秀的響應範圍設計下可以給適配範圍內的設備最好的體驗，在同一個設備下實際還是固定的佈局。

響應式佈局（Responsive Layout）

#隨著CSS3出現了媒體查詢技術，又出現了響應式設計的概念。響應式設計的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、手錶、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果，對CSS編寫者而言，在實現上不拘泥於具體手法，但通常是糅合了流式佈局彈性佈局，再搭配媒體查詢技術使用。 ——分別為不同的螢幕解析度定義佈局，同時，在每個佈局中，應用串流佈局的概念，即頁面元素寬度隨著視窗調整而自動適配。即：建立多個流體式佈局，分別對應一個螢幕解析度範圍。可以把響應式佈局看作是串流佈局和自適應佈局設計理念的融合。

響應式幾乎已經成為優秀頁面佈局的標準。

1、佈局特點：每個螢幕解析度下面會有一個佈局樣式，即元素位置和大小都會改變。

2、設計方法：媒體查詢 串流佈局。通常使用 @media 媒體查詢 和網格系統 (Grid System) 來配合相對佈局單位進行佈局，實際上就是綜合響應式、流動等上述技術透過 CSS 給單一網頁不同裝置傳回不同樣式的技術統稱。

• 優點：適應pc和行動端，如果足夠耐心，效果完美

• 缺點：（1）媒體查詢是有限的，也就是可以枚舉出來的，只能適應主流的寬高。 （2）要搭配足夠多的螢幕大小，工作量不小，設計也需要多個版本。

響應式頁面在頭部會加上這一段程式碼：

<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">

總結：

響應式與自適應的原理是相似的，都是檢測設備，根據不同的設備採用不同的css，而且css都是採用的百分比的，而不是固定的寬度，不同點是響應式的模板在不同的設備上看上去是不一樣的，會隨著設備的改變而改變展示樣式，而自適應不會，所有的設備看起來都是一套的模板，不過是長度或者圖片變小了，不會根據設備採用不同的展示樣式，流式就是採用了一些設置，當寬度大於多少時怎麼展示，小於多少時怎麼展示，而且展示的方式向水流一樣，一部分一部分的加載，靜態的就是採用固定寬度的了。

串流佈局是用於解決類似的裝置不同解析度之間的相容(一般解析度差異較少)；響應式是用來解決不用裝置之間不用解析度之間的相容問題(一般是指PC，平板，手機等設備之間較大的解析度差異)。

如何實現響應式佈局：折騰響應式佈局設計，應運而生的web頁面響應佈局

彈性佈局（rem/em佈局）

參考：串流佈局與響應式網頁設計有什麼不同？

1、rem,em區別：rem,em都是順應不同網頁字體大小展現而產生的。其中，em是相對其父元素，在實際應用中相對而言會帶來許多不便；而rem是始終相對於html大小，即頁面根元素。

2、使用em 或rem 單位進行相對佈局，相對%百分比更加靈活，同時可以支援瀏覽器的字體大小調整和縮放等的正常顯示，因為em是相對父級元素的原因沒有得到推廣。 【中國站點製作網頁的時候，習慣用CSS強制定義字體大小，保證每個人都看到一致的效果，包括網易、搜狐這些門戶網站在內的大部分站點，用的都是絕對單位px（像素） 。但是，如果從網站易用性方面考慮，字體大小應該是可變的，一些視力不是那麼好的人需要放大字體才能看得清頁面內容。然而，佔據大部分瀏覽器市場的IE無法調整那些使用px作為單位的字體大小。國外人士非常重視網站的易用性，相當一部分外國網站已經使用em作為字體單位。 】

3、這類佈局的特點是，包裹文字的各元素的尺寸採用em/rem做單位，而頁面的主要劃分區域的尺寸仍使用百分數或px做單位（同「流式佈局”或“靜態/固定佈局”）。早期瀏覽器不支援整個頁面按比例縮放，僅支援網頁內文字尺寸的放大，這種情況下。使用em/rem做單位，可以使包裹文字的元素隨著文字的縮放而縮放。

4、浏览器的默认字体高度一般为16px，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。

Set body font-size to 62.5% for Easier em Conversion:

If you would like to use relative units (em) for your font sizes, declaring 62.5% for the font-size property of the body will make it easier to convert px to em. By doing it this way, converting to em is a matter of dividing the px value by 10 (e.g. 24px = 2.4em).

那么为什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？

因为有些浏览器默认的不是16px，或者用户修改了浏览器默认的字体大小（因浏览器分辨率大小，视力，习惯等因素）。如果我们将其设置为10px，一定会影响在这些浏览器上的效果，所以最好用绝大多数用户默认的16作为基数 * 62.5% 得到我们需要的10px。

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

实际项目设置成 font-size: 62.5%可能会出现问题，因为chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算，导致chrome的em/rem计算不准确。

针对这个现象，可以尝试设置html字体为100px，body 修正为16px，这样 0.1rem 就是 10px，而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小。

5、用em/rem定义尺寸的另一个好处是更能适应缩进/以字体单位padding或margin／浏览器设置字体尺寸等情况（因为em/rem相对于字体大小，会同步改变）。例如：p{ text-indent: 2em; }

6、使用rem单位的弹性布局在移动端也很受欢迎。

工具ViewtoREM：PX转换到REM（自动预处理）

rem的定义：font size of the root element，rem是相对于根元素来设置字体大小的，这就意味着，我们只需要根据自己的需求在根元素确定一个参考值。

rem与em、px的区别：

• px：像素，比较精确的单位，但不好做响应式布局

• em：以父节点font-size大小为参考点，标准不统一，容易造成混乱

• REM支持的浏览器：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。IE6-8无法支持。

对于不同尺寸的屏幕，可以统一假设屏幕宽度为640px后编写CSS（当然你也可以假定统一为320px）。此时，我们设定html元素的font-size为40px（同样，只是举例），然后各处（元素尺寸、文字大小）使用rem作为单位，随后搭配媒体查询或JS，根据屏幕的大小来动态控制html元素的font-size（特定屏幕尺寸下，html元素的font-size应当设置为何值，是使用这个方案时设计师和程序员需要反复考虑后确定的，以下试举一段相关的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; 
    }
}

其实在移动端使用所谓的弹性布局，是比较勉强的。移动端弹性布局流行起来的原因归根结底是rem单位对于（根据屏幕尺寸）调整页面的各元素的尺寸、文字大小时比较好用。其实，使用vw、vh等后起之秀的单位，可以实现完美的流式布局（高度和文字大小都可以变得“流式”），弹性布局就不再必要了。详细可参考：视区相关单位vw, vh…简介以及可实际应用场景

以下优缺点参考：响应式设计和REM布局的对比（有疑问）

• 优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。

• 缺点：这种rem+js只不过是宽度自适应，高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。如果只是宽度自适应，更推荐响应式设计。

响应式和弹性布局之间的对比：

响应式布局：改变浏览器宽度，“布局”会随之变化，不是一成不变的，例如导航栏在大屏幕下是横排，在小屏幕下是竖排，在超小屏幕下隐藏为菜单，也就是说如果有足够的耐心，在每一种屏幕下都应该有合理的布局，完美的效果。

rem布局：改变浏览器宽度，页面所有元素的高宽都等比例缩放，也就是大屏幕下导航是横的，小屏幕下还是横的只不过变小了。

结论：

1.如果只做pc端，那么静态布局（定宽度）是最好的选择；

2.如果做行動端，且設計對高度和元素間距要求不高，那麼彈性佈局（rem js）是最好的選擇，一份css 一份js調節font-size搞定；

3.如果pc，移動要相容，而且要求很高那麼響應式佈局還是最好的選擇，前提是設計根據不同的高寬做不同的設計，響應式根據媒體查詢做不同的佈局。

更多程式相關知識，請造訪：程式設計入門！ ！

以上是css佈局之靜態佈局、自適應佈局、串流佈局、響應式佈局、彈性佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！