RWD(Responsive Web Design)中文稱為回應式網頁設計、自適應網頁設計、響應式網頁設計等，是一種可以讓網頁的版面可以隨著不同的數碼裝置（如:PC電腦、智能手機、平板電腦）的寬度與高度自動調整螢幕畫面。
這幾天製作回應式網頁，經常需要使用到一個代碼，使網頁在不同的螢幕顯示不同的畫面，而且可以運用到廣告平台，在手機或電腦呈現不同的效果。
首先說明一下 max- 與 min- 之間的差別。
max-：表示這個數字以下（包含）的都適用。
min-：表示這個數字以上（包含）的都適用。
自動顯示
CSS:
@media (min-width:420px) {
.display-in-mobile {
display: none;
}
}
HTML:
<div class="display-in-mobile">只在手機或平板看到我</div>
說明：當螢幕的寬度少於「420PX」像素才會顯示出來。
解析：適合在智能手機或平板電腦顯示相關的內容。
自動隱藏
CSS:
@media (max-width:320px) {
.hide-in-ads {
display: none;
}
}
.hide-in-ads {
width: 336px;
clear: both;
}
HTML:
<div class="hide-in-ads">廣告代碼</div>
說明：當螢幕的寬度少於「320PX」像素會隱藏物件。
解析：適合在智能手機或平板電腦隱藏相關的內容。
And 使用方法
單一條件：
@media screen and (orientation: portrait) {
.css {}
}
說明：如果螢幕視窗為直立，就套用這些css設定。
螢幕視窗橫向寫法: orientation:landscape
同時符合兩種條件：
@media screen and (min-width: 400px) and (max-width: 700px) {
.css {}
}
說明：螢幕寬度在 400px ~ 700px 之間，就套用這些 css 設定。
兩種條件!符合一種即可：
@media screen and (color), projection and (color) {
.css {}
}
說明：如果是彩色螢幕，或彩色投影機，就套用這些 css 設定。
Only 使用方法
有的瀏覽器並不支援 Media Queries，但支援 Media Type，所以我們可以用Only來阻擋這些瀏覽器。
<link rel="stylesheet" type="text/css" href="test.css" media="only screen and (color)">
說明：
支援 Media Queries & Media Type 的瀏覽器：如果是彩色螢幕，就會讀取 test.css。
不支援 Media Queries，但支援 Media Type 的瀏覽器：因為有寫 Only 條件，所以不會往下讀「彩色螢幕」，所以不會呼叫 test.css
不支援 Media Queries & Media Type 的瀏覽器：不管有沒有 Only，都不會呼叫 test.css
Not 使用方法
Not 是用來排除某些設備的樣式，假設你希望這個樣式只在 A 設備有作用， B 設備完全沒用，就可以使用 Not 囉。
舉例如下：
@media not screen and (color), print and (color) {
.css {}
}
說明：彩色螢幕不會套用 css 設定，彩色印表機會套用 css 設定
我們也可以換個寫法，用數學運算子的括號先決，應該會比較清楚：@media (not (screen and (color))), print and (color)
針對不同的媒體使用不同的樣式表
下面來解釋一下遇到衝突時的機制：
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 800px)">
<link rel="stylesheet" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
<link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)">
說明：上面將設備分成3種，分別是寬度大於800px時，應用styleA ，寬度在600px到800px之間時應用styleB ，以及寬度小於600px時應用styleC 。那假如寬度正好等於800px時該應用那個樣式？是styleB，因為前兩條表達式都成立，按CSS默認優先級規則後者覆蓋了前者。
因此，為了避免衝突，這個例子正常情況應該這樣寫：
<link rel="stylesheet" href="styleA.css" media="screen">
<link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)">
<link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)">
常用的幾種屏幕寬度設定
@media screen and (min-width: 1200px) {
css-code;
}
@media screen and(min-width: 960px) and (max-width: 1199px) {
css-code;
}
@media screen and(min-width: 768px) and (max-width: 959px) {
css-code;
}
@media screen and(min-width: 480px) and (max-width: 767px) {
css-code;
}
@media screen and (max-width: 479px) {
css-code;
}
若網主使用的程序是「WordPress」可以使用以下的代碼，在不同的裝置顯示或隱藏物件。
Code:
<?php if (wp_is_mobile()) { ?>
手機版顯示的內容
<?php } ?>
::或::
<?php if (! wp_is_mobile()) { ?>
電腦版顯示的內容
<?php } else if (wp_is_mobile()) { ?>
手機版顯示的內容
<?php } ?>
