CSS3 媒體查詢
通過 CSS 媒體查詢，你可以將文件格式化為在不同大小的輸出裝置上正確顯示。
媒體查詢和響應式網頁設計
通過媒體查詢，你可以針對特定範圍的裝置（如行動電話，平板電腦，桌上型電腦等）自定義網頁的簡報，而無需更改標記。媒體查詢由媒體型別和零個或多個表示式組成，這些表示式匹配特定媒體功能的型別和條件，例如裝置寬度或螢幕解析度。
由於媒體查詢是邏輯表示式，因此可以將其解析為 true 或 false。如果媒體查詢中指定的媒體型別與正在顯示文件的裝置型別匹配，則查詢結果將為 true，並且滿足媒體查詢中的所有表示式。當媒體查詢為 true 時，相關的樣式表或樣式規則將應用於目標裝置。以下是標準裝置的媒體查詢的簡單示例。
/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
/* styles */
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
/* styles */
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
/* styles */
}
/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
/* styles */
}
/* Tablets, iPads (portrait) ---------- */
@media screen and (min-width: 768px){
/* styles */
}
/* Tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px){
/* styles */
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px){
/* styles */
}
/* Large screens ---------- */
@media screen and (min-width: 1824px){
/* styles */
}
提示： 媒體查詢是建立響應式佈局的絕佳方式。使用媒體查詢，你可以為在智慧手機或平板電腦等裝置上瀏覽的使用者自定義你的網站，而無需更改頁面的實際內容。
根據螢幕尺寸更改列寬
你可以使用 CSS 媒體查詢來更改網頁寬度和相關元素，以便為不同裝置上的使用者提供最佳的檢視體驗。
以下樣式規則將根據螢幕或視區大小自動更改容器元素的寬度。例如，如果視區寬度小於 768 畫素，則它將覆蓋 100%的視區寬度，如果它大於 768 畫素但小於 1024 畫素，則寬度為 750 畫素，依此類推。
.container {
margin: 0 auto;
background: #f2f2f2;
box-sizing: border-box;
}
/* Mobile phones (portrait and landscape) ---------- */
@media screen and (max-width: 767px){
.container {
width: 100%;
padding: 0 10px;
}
}
/* Tablets and iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1023px){
.container {
width: 750px;
padding: 0 10px;
}
}
/* Low resolution desktops and laptops ---------- */
@media screen and (min-width: 1024px) {
.container {
width: 980px;
padding: 0 15px;
}
}
/* High resolution desktops and laptops ---------- */
@media screen and (min-width: 1280px) {
.container {
width: 1200px;
padding: 0 20px;
}
}
注意： 你可以在元素上使用 CSS3 box-sizing 屬性，以更少的工作量建立更直觀，更靈活的佈局。
根據螢幕大小更改佈局
你還可以使用 CSS 媒體查詢，通過很少的自定義，使你的多列網站佈局更具適應性和響應性。
如果視區大小大於或等於 768 畫素，則以下樣式規則將建立兩列布局，但如果小於該列布局，則它將呈現為一列布局。
.column {
width: 48%;
padding: 0 15px;
box-sizing: border-box;
background: #93dcff;
float: left;
}
.container .column:first-child{
margin-right: 4%;
}
@media screen and (max-width: 767px){
.column {
width: 100%;
padding: 5px 20px;
float: none;
}
.container .column:first-child{
margin-right: 0;
margin-bottom: 20px;
}
}