前端點滴（CSS）（二）---傾盡所有
CSS Hack
條件hack
只在IE下生效
<!--[if IE]>
<style>
.test{color:yellow;}
</style>
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
.test{color:yellow;}
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
.test{color:yellow;}
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
.test{color:yellow;}
<![endif]-->
非IE瀏覽器生效
<!--[if !IE]>
.test{color:yellow;}
<![endif]-->
屬性級hack
.test{
color:#090\9;
*color:#f00;
_color:#ff0;
}
“-″減號是IE6專有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只對IE9/IE10生效，是IE9/10的hack
選擇符hack（選擇器前綴）
* html .test{color:#0f90;}
* + html .test{color:#ff0;}
CSS單位
像 px、rem、em、% 這樣的長度單位大家肯定都很熟悉，前者爲絕對單位，後者爲相對單位。CSS3 又引入了新單位：vw、vh、vmin、vmax。下面對它們做個詳細介紹。
| 單位 | 作用 | 特性 |
|---|---|---|
| px | 頁面按精確像素展示 | 絕對單位 |
| rem | 相對根節點html字體大小來計算 | 相對單位 |
| em | 基準點爲相對父節點字體的大小 | 相對單位 |
| % | 相對於父元素的大小設定的比率 | 相對單位 |
| vw | 視窗寬度的百分比，1vw代表視窗寬度的1% | 視窗單位 |
| vh | 視窗高度的百分比，1vh代表視窗高度的1% | 視窗單位 |
| vmin | 當前vw和vh中較小的一個值 | 視窗單位 |
| vmax | 當前vw和vh中較大的一個值 | 視窗單位 |
提示：vw、vh、vmin、vmax 是一種視窗單位，也是相對單位。它相對的不是父節點或者頁面的根節點。而是由視窗（Viewport）大小來決定的，單位 1，代表類似於 1%。
視窗(Viewport)是你的瀏覽器實際顯示內容的區域—，換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。 假如給頁面設置一個寬800px，則400px=50vh=50%。
一、px、em和rem的區別
px是固定的像素，一旦設置了就無法因爲適應頁面大小而改變。
em和rem相對於px更具有靈活性，他們是相對長度單位，意思是長度不是定死了的，更適用於響應式佈局。
對於em和rem的區別一句話概括：em相對於父元素，rem相對於根元素。
rem中的r意思是root（根源），這也就不難理解了。
二、vw、vh 與 % 百分比的區別
% 是相對於父元素的大小設定的比率，vw、vh 是視窗大小決定的。
vw、vh 優勢在於能夠直接獲取高度，而用 % 在沒有設置 body 高度的情況下，是無法正確獲得可視區域的高度的，所以這是挺不錯的優勢。
三、vmin、vmax 用處
做移動頁面開發時，如果使用 vw、wh 設置字體大小（比如 5vw），在豎屏和橫屏狀態下顯示的字體大小是不一樣的。 由於 vmin 和 vmax 是當前較小的 vw 和 vh 和當前較大的 vw 和 vh。這裏就可以用到 vmin 和 vmax。使得文字大小在橫豎屏下保持一致。
CSS尺寸
| 屬性 | 說明 |
|---|---|
| height | 設置元素的高度。 |
| line-height | 設置行高。 |
| max-height | 設置元素的最大高度。（常用於響應式佈局） |
| max-width | 設置元素的最大寬度。（常用於響應式佈局） |
| min-height | 設置元素的最小高度。（常用於響應式佈局） |
| min-width | 設置元素的最小寬度。（常用於響應式佈局） |
| width | 設置元素的寬度。 |
CSS佈局（重點）
PC端佈局思想與實現
靜態佈局：
將以下設置在head中，
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
根據設計稿的寬高設定實現稿即可。
這種方式簡單易上手，缺點顯而易見，不能根據不同的屏幕做出不同的表現。例如直接設定主體寬度，然後居中展示，兩邊留白。寬屏兩邊留白多，窄屏兩邊留白少。
單列布局
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>上中下三行 頭部200px高 底部200px高 中間自適應佔滿</title>
<style>
.box{
width:600px;
height:400px;
border:1px solid #ccc;
margin:0 auto;
position:relative;
}
.top{
width:600px;
height:100px;
background-color:#ff0;
position:absolute;
top:0;
left:0;
}
.zhong{
width:100%;
background-color:#f0f;
position:absolute;
top:100px;
bottom:100px;
}
.bottom{
width:600px;
height:100px;
background-color:#f00;
position:absolute;
bottom:0;
left:0;
}
</style>
</head>
<body>
<div class="box">
<div class="top"></div>
<div class="bottom"></div>
<div class="zhong"></div>
</div>
</body>
</html>
效果：
兩欄佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- float+margin實現兩欄佈局，一列定寬，一自適應
定寬可以作爲廣告欄，自適應可以做內容區 -->
<style type="text/css">
.left{
width: 12.5rem;
height: 600px;
background: yellow;
float: left;
display: table;
text-align: center;
line-height: 600px;
color: #fff;
}
.right{
margin-left: 210px;
height: 600px;
background: blueviolet;
text-align: center;
line-height: 600px;
}
</style>
</head>
<body>
<body>
<div class="left">定寬</div>
<div class="right">自適應</div>
</body>
</body>
</html>
效果：
三欄佈局
1.float+margin實現
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- float+margin實現三欄佈局，兩列左、右定寬，中間自適應
缺點就是：中間內容佔據較少空間，當寬度<左右寬度相加時，.right會往下掉 -->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.left{
width: 200px;height: 300px; background: yellow; float: left;
}
.right{
width: 150px; height: 300px; background: blueviolet; float: right;
}
.middle{
height: 300px; background: goldenrod; margin-left: 220px; margin-right: 160px;
}
</style>
</head>
<body>
<div class="left">左欄</div>
<div class="right">右欄</div>
<div class="middle">中間欄</div>
</body>
</html>
2.position+margin實現
<!-- 使用position+margin實現三欄佈局
缺點：
1.中間欄內容過少，當調整屏幕像素時發現右會覆蓋左
2.父系元素沒有設置外邊距爲0時，會導致中間欄的位置出現偏差 -->
<style type="text/css">
*{ /*添加後發現*/
margin: 0;
}
.left{
background: skyblue;
width: 200px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
.middle{
height: 300px;
margin: 0 220px;
background: yellow;
}
.right{
height: 300px;
width: 200px;
position: absolute;
top: 0;
right: 0;
background: violet;
}
</style>
<body>
<div class="left">左欄</div>
<div class="middle">中間欄</div>
<div class="right">右欄</div>
</body>
3.使用float和BFC配合聖盃佈局
<!-- 使用float和BFC配合聖盃佈局
缺點是：1. 結構不正確 2. 多了一層標籤 -->
<style type="text/css">
.wrapper{
overflow: hidden;
}
.middle{
width: 100%;
float: left;
}
.middle .main{
margin: 0 220px;
background: red;
}
.left{
width: 200px;
height: 300px;
float: left;
background: green;
margin-left: -100%;
}
.right{
width: 200px;
height: 300px;
float: left;
background: yellow;
margin-left: -200px;
}
</style>
<body>
<div class="wrapper">
<div class="middle">
<div class="main">中間</div>
</div>
<div class="left">
左欄
</div>
<div class="right">
右欄
</div>
</div>
</body>
實例效果如上。
擴展：BFC佈局規則以及實現案例
BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。
BFC的佈局規則
-
內部的Box會在垂直方向，一個接一個地放置。
-
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
-
每個盒子（塊盒與行盒）的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
-
BFC的區域不會與float box重疊。
-
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
-
計算BFC的高度時，浮動元素也參與計算。
BFC創建原則
1、float的值不是none，而是left、right。
2、position的值不是static或者relative，而是absolute、fixed。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible，而是hidden…
只要遵照上述其中一條就會存在BFC
BFC作用
- 利用BFC避免margin重疊。（由於父子、兄弟垂直方向的margin會重疊，所以可以利用BFC原則破壞垂直方向的margin重疊問題），同時驗證Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p>123</p>
<div>
<p>456</p>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
p {
color: #fff;
background: red;
width: 200px;
line-height: 100px;
text-align:center;
margin: 30px;
}
div{
overflow: hidden; /*BF創建原則4*/
}
- 自適應兩欄佈局（使用方法類似於上文的三欄佈局，由於兩欄佈局需要浮動，但是同時浮動卻滿足不了自適應），同時驗證每個盒子（塊盒與行盒）的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。BFC的區域不會與float box重疊。
代碼如下：
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="left">左</div>
<div class="right">右</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
body {
width: 100%;
}
.left {
width: 100px;
height: 50px;
float: left;
background: red;
text-align: center;
line-height: 50px;
font-size: 20px;
}
.right {
float:left; /*同時浮動的後果，BF創建原則1，但滿足不了自適應*/
height: 100px;
background: yellow;
text-align: center;
line-height: 100px;
font-size: 40px;
}
將float：left修改成overflow：hidden看看效果
.right {
overflow:hidden;
height: 100px;
background: yellow;
text-align: center;
line-height: 100px;
font-size: 40px;
}
- 用於清楚浮動。（清除浮動中存在一種方法是在父元素中添加overflow:hidden），同時驗證計算BFC的高度時，浮動元素也參與計算。
當我們不給父節點設置高度，子節點設置浮動的時候，會發生高度塌陷，這個時候我們就要清楚浮動。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="father">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
CSS
.father {
border: 5px solid RED;
width: 500px;
overflow: hidden;
}
.child {
border: 5px solid green;
width:100px;
height: 100px;
float: left;
}
移動端的佈局思想與實現
一、靜態佈局（Static Layout）
- 在viewport meta標籤上設置content = “width=320”， 頁面的各個元素也採用px作爲單位。通過用JS動態修改標籤的initial-scale使得頁面等比例縮放， 從而剛好佔滿整個屏幕。這種方案類似彈性佈局的rem。
<script type="text/javascript">
if (document.documentElement.clientWidth < 480) {
document.querySelector("meta[name=viewport]").setAttribute(
'content',
'width=640,initial-scale=2.0,minimum-scale=1.0,maximum-scale=3.0');
}
</script>
- 在viewport meta標籤上設置content=“width=640，user-scalable=no”，頁面的各個元素採用px作爲單位。由於手機瀏覽器的寬度小於640px(邏輯像素)（iphone plus系列爲414px），所以瀏覽器viewport會自動縮放至全屏大小。經典案例：荔枝FM,人人都是播客的移動站
優勢：
開發簡單： 縮放交給瀏覽器，開發人員不需要自己操心，完全按照視覺稿切圖。
還原精準： 絕對等比例縮放，可以精準的還原原始視覺效果（會有清晰度的失真）。
測試方便： 可以在pc端實現大部分的測試工作，即開發人員自己就能完成測試的大部分工作，手機端只要修改一些細節。
劣勢：
像素丟失： 對於一些分辨率較低的手機，可能設備像素還未達到viewport指定的寬度，此時可能出現邊框丟失等問題。現代手機基本不會發生這種情況。
縮放失效： 早期android手機不能根據meta中的width來進行縮放，需要配合initial-scale。這種完全依賴瀏覽器的方式也難免可能發生異常。
文本折行： 會發生在縮放失效的機型中。
二、流式佈局（Liquid Layout）
流式佈局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕分辨率進行適配調整，但整體佈局不變。代表作柵欄系統（網格系統）。
網頁中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設置網頁主體的寬度爲80%，min-width爲960px。圖片也作類似處理（width:100%, max-width一般設定爲圖片本身的尺寸，防止被拉伸而失真）。
1、佈局特點：屏幕分辨率變化時，頁面裏元素的大小會變化而但佈局不變。【這就導致如果屏幕太大或者太小都會導致元素無法正常顯示】
2、設計方法：使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，儘可能的適應各種分辨率。往往配合 max-width/min-width 等屬性控制尺寸流動範圍以免過大或者過小影響閱讀。
專業一點說法：關鍵元素高寬和位置都不變，只有容器元素在做伸縮變換
參考案例：
3、開發思路：
- 多列等分 -> 百分比等分
- 左側固定寬度 + 右側自適應寬度
思路一 -> 左側左浮動+右側利用BFC特性在右側
思路二 -> 父級給padding-left，預留出來左側區域的寬度，左側用絕對定位上去，右側用百分百寬度 - 左側自適應 + 右側固定寬度
思路一 -> 左側用百分百寬度,右側用絕對定位上去 - 左右固定寬度 + 中間自適應
思路一 -> 左側左浮動 + 中間百分之百（中間部分再分爲左側百分之百+右側右浮動）
思路二 -> 左側左浮動 + 中間百分之百 + 右側右浮動 （負margin法減掉左右側）
思路三 -> 左右絕對定位 + 中間百分之百（父元素padding-left,padding-right預留左右側的位置） - 左中右全自適應 -> 全部用百分比
- font-size、padding,margin,height直接量像素
- 小的地方可以用display:inline-block;讓幾個容器放在一排
- 小圖標之類的，可以考慮用::before,::after來實現
這種佈局方式在Web前端開發的早期歷史上，用來應對不同尺寸的PC屏幕（那時屏幕尺寸的差異不會太大），在當今的移動端開發也是常用佈局方式，但缺點明顯：主要的問題是如果屏幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的屏幕上不能正常顯示。因爲寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”），顯示非常不協調。
三、rem佈局
REM，即font size of the root element，使用 rem 單位進行相對佈局，通過根元素進行適配，它好比是一箇中介，通過它計算出頁面真正要展示的大小， 達到自適應效果。（有時需要配合媒體查詢），常用於移動端開發。
rem避免了根據 px 佈局在高分辨率下幾乎無法辨認的缺點，又相對 % 百分比更加靈活，同時可以支持瀏覽器的字體大小調整和縮放等的正常顯示。
實現 rem 的核心，就是通過js代碼針對並監聽不同尺寸的手機屏幕計算出相應的比例，具體方法有：
方法一：
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth >= 設計稿寬度){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 設計稿寬度) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
方法二：
(function(factory){
factory();
window.addEventListener('resize',factory,false);
}(function(){
var width = document.documentElement.clientWidth;
width = width > 稿寬 ? 稿寬 : width;
document.documentElement.style.fontSize = width / （稿寬/100） + 'px';
}))
方法三：（推薦）
// 設置縮放
function fixPixelRatio () {
var scale = 1 / window.devicePixelRatio;
var meta= '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale + ',' + ' minimum-scale=' + scale + ', width=device-width,' + ' user-scalable=no" />';
document.write(meta);
}
// 設置font-size
function displayRem () {
var designW = 稿寬; //設計稿寬
var font_rate = 100;
//適配
document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
//監測窗口大小變化
window.addEventListener("orientationchange" in window ? "orientationchange" : "resize", function () {
document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
}, false);
}
fixPixelRatio()
displayRem()
案例可以參考：
https://blog.csdn.net/Fabulous1111/article/details/78420191
https://blog.csdn.net/fabulous1111/article/details/78598425
https://github.com/XieTongXue/how-to/tree/master/pay-h5
網易
四、flex（彈性）佈局
<!-- PC端的網頁最佳方案使用flex佈局 -->
<style type="text/css">
.wrapper{
display: flex;
}
.left{
width: 200px;
height: 300px;
background: green;
}
.middle{
width: 100%;
background: red;
marign: 0 20px;
}
.right{
width: 200px;
height: 3000px;
background: yellow;
}
</style>
<body>
<div class="wrapper">
<div class="left">左欄</div>
<div class="middle">中間</div>
<div class="right">右欄</div>
</div>
</body>
關於彈性佈局的一些屬性以及說明
| 屬性 | 屬性值 | 說明 |
|---|---|---|
| display | flex | 彈性佈局的重要參數，相當於清浮後的float：left |
| flex-direction | row（默認值）:主軸爲水平方向，起點在左端、row-reverse:主軸爲水平方向，起點在右端、column:主軸爲垂直方向，起點在上沿、column-reverse:主軸爲垂直方向，起點在下沿 | 決定主軸的方向（即項目的排列方向） |
| flex-wrap | wrap、no-wrap、wrap-reverse、繼承 | 如果一條軸線 排不下，是否換行 |
| flex-flow | flex-direction && flex-wrap | flex-direction屬性和flex-wrap屬性的簡寫形式，默認 row nowrap |
| justify-content | flex-start 、flex-end 、center 、space-between、space-around | 定義了項目在主軸上的對齊方式，具體表現如下圖 |
| align-items | flex-start 、 flex-end 、 center 、baseline 、 stretch | 定義項目在交叉軸上如何對齊，具體表現如下圖 |
| align-content | flex-start 、flex-end 、center 、space-between、space-around | 定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用，具體表現如下圖 |
| ordert | number | 定義項目的排列順序。數值越小，排列越靠前，默認爲0 |
| flex | auto（1 1 auto）和none（0 0 auto） | flex-grow（放大比例），flex-shrink（縮小比例）和flex-basis（分配基礎）的簡寫，默認值爲0 1 auto。後面兩個屬性可選 |
justify-content：
align-items：
align-content：
五、響應式佈局
- 佈局及設置meta標籤
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
| 屬性名 | 取值 | 描述 |
|---|---|---|
| width | 正整數 | 定義佈局視口的寬度，單位爲像素 |
| height | 正整數 | 定義佈局視口的高度，單位爲像素，很少使用 |
| initial-scale | [0,10] | 初始縮放比例，1表示不縮放 |
| minimum-scale | [0,10] | 最小縮放比例 |
| maximum-scale | [0,10] | 最大縮放比例 |
| user-scalable | yes／no | 是否允許手動縮放頁面，默認值爲yes |
主要是爲了讓代碼適應移動端的屏幕。viewport是指需要加載meta標籤時讀取的名字爲‘視口’，其中，width等於設備的寬度device-width，是爲了告訴瀏覽器，將佈局視口的寬度設置爲設備理想的寬度，initial-scale=1(縮放比例)保證加載的時候，要獲取設備的寬度，同時要保持原始大小，便於媒體查詢。user-scalable=no指定不允許用戶縮放屏幕。
- 通過媒體查詢來設置響應式樣式
media query 是響應式佈局的核心，他們夠和瀏覽器進行溝通，告訴瀏覽器頁面改如何呈現
@media screen and (max-width: 960px){
body{
background-color:#FF6699
}
}
@media screen and (max-width: 768px){
body{
background-color:#00FF66;
}
}
@media screen and (max-width: 550px){
body{
background-color:#6633FF;
}
}
@media screen and (max-width: 320px){
body{
background-color:#FFFF00;
}
}
實際上就是通過媒體查詢定義了幾套樣式，通過max-width設置樣式生效時的最大分辨率，上述的代碼分別對分辨率在0～320px，320px～550px，550px～768px以及768px～960px的屏幕設置了不同的背景顏色。
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="header">頭部</div>
<div id="main">
<div id="main-left">內容-左邊</div>
<div id="main-center">內容-中間</div>
<div id="main-right">內容-右邊</div>
</div>
<div id="footer">底部</div>
</body>
</html>
css
*{
padding:0px;
margin:0px;
font-family:"微軟雅黑";
}
#header{
height:100px;
border:solid 1px red;
margin:0px auto;
}
#main{
margin:10px auto;
height:400px;
}
#footer{
margin:0px auto;
height:100px;
border:solid 1px red;
}
@media screen and (min-width:900px) /*PC端*/
{
#header,#footer
{
width:100%;
}
#main
{
width:100%;
height:400px;
}
#main-left
{
width:20%;
height:400px;
border:solid 1px red;
float:left; /*保證在同一行*/
}
#main-center
{
width:39%;
height:400px;
border:solid 1px red;
float:left;
}
#main-right
{
width:40%;
height:400px;
border:solid 1px red;
float:left;
}
}
/*分辨率在600~900間*/
@media screen and (min-width:600px) and (max-width:900px)
{
#header,#footer
{
width:600px;
}
#main
{
width:600px;
height:400px;;
}
#main-left
{
width:200px;
height:400px;
border:solid 1px red;
float:left;
}
#main-center
{
width:396px;
height:400px;
border:solid 1px red;
float:left;
}
#main-right
{
display:none; /*隱藏右邊*/
}
}
/*手機模式*/
@media screen and (max-width:600px)
{
#header,#footer
{
width:300px;
}
#main
{
width:300px;
height:400px;
}
#main-left
{
display:none; /*隱藏內容左邊*/
}
#main-center
{
width:300px;
height:400px;
border:solid 1px red;
}
#main-right
{
display:none; /*隱藏內容右邊*/
}
}
總結
響應式與自適應的原理是相似的，都是檢測設備，根據不同的設備採用不同的css，而且css都是採用的百分比的，而不是固定的寬度，不同點是響應式的模板在不同的設備上看上去是不一樣的，會隨着設備的改變而改變展示樣式，而自適應不會，所有的設備看起來都是一套的模板，不過是長度或者圖片變小了，不會根據設備採用不同的展示樣式，流式就是採用了一些設置，當寬度大於多少時怎麼展示，小於多少時怎麼展示，而且展示的方式向水流一樣，一部分一部分的加載，靜態的就是採用固定寬度的了。
流式佈局是用於解決類似的設備不同分辨率之間的兼容(一般分辨率差異較少)；響應式是用於解決不用設備之間不用分辨率之間的兼容問題(一般是指PC，平板，手機等設備之間較大的分辨率差異)。
- 如果只做pc端，那麼靜態佈局（定寬度）是最好的選擇；
- 如果做移動端，且設計對高度和元素間距要求不高，那麼彈性佈局（rem+js）是最好的選擇，一份css+一份js調節font-size搞定；
- 如果pc，移動要兼容，而且要求很高那麼響應式佈局還是最好的選擇，前提是設計根據不同的高寬做不同的設計，響應式根據媒體查詢做不同的佈局。
推薦好文：
靜態佈局、自適應佈局、流式佈局、響應式佈局、彈性佈局等的概念和區別
從網易與淘寶的font-size思考前端設計稿與工作流
移動web資源整理