響應式介紹 來自http://fundesigner.net/css3-media-queries/

下面的語法，是最常用到的 Media Queries：（下方為同一檔案之內容）

//全部的使用者都會載入這裡的 CSS。

@media screen and (min-width: 1200px) {
    // 如果使用者之視窗寬度 >= 1200px，將會再載入這裡的 CSS。
}

@media screen and (min-width: 768px) and (max-width: 979px) {
    // 如果使用者之視窗寬度介於 768px ~ 979px，將會再載入這裡的 CSS。    
}

@media screen and (max-width: 767px) {
    // 如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS。    
}

@media screen and (max-device-width: 480px) {
    // 如果使用者之裝置寬度 <= 480px，將會再載入這裡的 CSS。 
}

在 Media Queries 中，我們最常使用 min-width 和 max-width 來判斷使用者的視窗寬度，而 max-device-width 則是使用者「裝置」的最大寬度。width 和 device-width 差在哪裡？

• width : 因為瀏覽器可以自由調整寬度，所以這邊指的是該瀏覽視窗的寬度。
• device-width : 就算你把瀏覽器視窗弄到符合最大(小)寬度，還是不會生效。因為，device-width 指的是使用者的「裝置」最大寬度，而不是瀏覽器視窗。所以，device-width 常用在判斷手機上。

所以，你也可以自己加上其他的條件下去。要注意的是，每一個條件之間請用 and 來分隔，並要適時加上括號以免錯誤。 min-width 是最小寬度；max-width 是最大寬度，可以用來表示一定的範圍。

寫在 HTML 裡頭的判斷

上一節的語法，你也可以把它個別拆成好幾個檔案，然後用 HTML 的 來載入並且判斷。下面為 HTML 代碼：

<link rel="stylesheet" type="text/css" href="all.css" media="screen">
<link rel="stylesheet" type="text/css" href="a.css" media="screen and (max-width: 767px)">
<link rel="stylesheet" type="text/css" href="b.css" media="screen and (min-width: 768px) and (max-width: 979px)">
<link rel="stylesheet" type="text/css" href="c.css" media="screen and (min-width: 1200px)">
<link rel="stylesheet" type="text/css" href="d.css" media="screen and (max-device-width: 480px)">

我們就可以用 link 中的 media 屬性來判斷使用者的視窗 / 裝置寬度，如上。之後，在每一個 css 檔案中你就可以寫若使用者寬度符合條件的 CSS 。如 a.css 中，就是要寫如果使用者之視窗寬度 <= 768px，要再載入的 CSS。

注意事項

在 Media Queries 中的 CSS，其效果是覆蓋原本預設的 CSS。所以，你要先有一份完整的 CSS，再使用 Medai Queries，對細部元素做調整。所以，絕對不是把全部的 CSS 複製一遍到 Media Queries 中再修改喔！

Viewport

如果網頁沒有做 Responsive Web Design 的話，手機的瀏覽器會自動假裝解析度變很大，會讓網頁完整顯示。但是，這就讓字變得很小，使用者還要去做放大而不能直接閱讀。而這個 meta 標籤是為了防止這樣的情形發生 ( iphone 據說會有此情形)，讓網頁顯示的寬度就直接是裝置的寬度，不會把網頁硬塞。這段只要加在 HTML 的 裡頭即可。

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

來自 http://fundesigner.net/css3-media-queries/

::after ::before

普通

ＨＴＭＬ

<strong class="amount"><span>$ </span>700<span> 萬元</span></strong>

ＣＳＳ

.amount {color:red;}

這樣會是整個 $ 700 萬元 都變成紅字

使用後

.amount::before {content:"$ "; color:blue;}
.amount::after {content:" 萬元"; color:blue;}

結果會像 $ 700 萬元，先前定義的紅字還是存在。 ::before, ::after 沒有限制兩個同時都要指定，也可以只指定一個前或一個後。

使用after他就會將那段css加到div的後面

反之before就是前面

float搶救跑版

 .clear::before, .clear::after {
        content: "";
        display: table;
    }
    .clear::after {
        clear: both;
    }

float跑版整理

方法一
增加具有clear:both設定的div元素，在float子區塊後面來清除Float效果，讓父區塊可以成功的包覆子區塊
html:
<div id="well">
<div class="left">left</div>
<div class="clean">消除浮動</div>
</div>

css:
.left{
float:left;
}
.clean{
clear:both;
}

方法二

(1)父區塊設定overflow:auto的屬性

(2)原因overflow屬性原本是用來控制當內容超出顯示範圍時，是否出現捲軸效果的屬性
(3)overflow:auto，也就是為內容嵌入顯示捲軸的顯示區域，但視情況顯示捲軸

html:

<div id="well">

<div class="left">left</div>

</div>

css:

.left{

float:left;

}

#well{

overflow:auto;

}

單純使用Overflow來消除float效果也有它的副作用，如果使用overflow:auto，但不小心內容太多爆出界了，捲軸就會出現。也許你會想用overflow:hidden，強制捲軸別出現，但超出的內容依舊會不見。例如在裡面放了一大段沒有空白(space)字元的內容 (文字不會斷行顯示)；或者在裡頭放了太大張的圖片。

要解決這樣的問題，可以在文字內容區塊設定 word-wrap: break-word，如此可以讓文字內容自動斷行顯示；而針對太大張的圖片，可以設定圖片區塊的 max-width:100% 以及 height:auto，讓它依照父區塊的最大尺寸來延伸，而不會超出界。

margin

margin : 0;

2	/*一個值：代表上、下、左、右。margin : 0 0 0 0;的簡寫。*/

3	margin : 5 10;

4	/*二個值：值1：上下、值2：左右。margin : 5 10 5 10;的簡寫。*/

5	margin : 5 10 15;

6	/*三個值：值1：上、值2：左右、值3：下。margin : 5 10 15 10;的簡寫。*/

7	margin: 1 10 5 15;

8	/*四個值：值1：上、值2：右、值3：下、值4：左。*/

CSS版面置中

BODY{
text-align:center；
max-width:XXX px；
margin:0 auto；
}

嚮應式設計viewport

width	設定畫面寬度
height	設定畫面高度
initial-scale	設定畫面的初始縮放比例
minimum-scale	設定畫面的最小縮放比例
maximum-scale	設定畫面的最大縮放比例
user-scalable	設定是否允許使用者改變縮放比例