媒體查詢


響應式 Web 設計 - 媒體查詢

媒體(media)查詢在 CSS3 上有介紹：CSS3 @media 查詢。

使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。

實例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8"> 
<title>php 中文网</title> 
<style>
body {
    background-color:lightgreen;
}

@media only screen and (max-width: 500px) {
    body {
        background-color:lightblue;
    }
}
</style>
</head>
<body>
<p>重置浏览器大小，当文档的宽度小于 500 像素，背景会变为浅蓝色，否则为浅绿色。</p>
</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

加入斷點

在先前的教程中我們使用行和列來製作網頁，它是響應式的，但在小螢幕上並不能友善的展示。

媒體查詢可以幫我們解決這個問題。我們可以在設計稿的中間加入斷點，不同的斷點有不同的效果。

桌面裝置

1.png

手機裝置

2.png

#使用媒體查詢在768px 中新增斷點：

實例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"> 
<title>php 中文网</title> 
<style>
* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}
</style>
</head>
<body>

<div class="header">
<h1>Chania</h1>
</div>

<div class="row">

<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>

<div class="col-6">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>
<div class="col-3 right">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>

</div>

<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

為行動端優先設計

行動端優先意味著在設計桌面和其他裝置時優先考慮行動端的設計。

這意味著我們必須對 CSS 做一些改變。

我們在螢幕小於 768px 進行樣式修改，同樣在螢幕寬度大於 768px 時也需要修改樣式。以下是行動端優先實例：

/* 為行動端設計: */
#[class*="col-"] {
width: 100%;
}
#@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width:# 8.33%;# }
    .col-2 {width: 16.66%;}
    .col-3 { width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width:##    .col-6 {#width:
50%;}    .col-7 {width:
58.33%;}    . col-8 {width:
66.66%;}    .col-9 {#width:




################################################################################################################# 75%;###}######    .col-10 ###{###width:###### 83.33%;###}######    .col-11 # ##{###width:###### 91.66%;###}#######    .col-12 ###{###width:###### 100%;# ##}###}##########

其他斷點

你可以依照自己的需求加入斷點。

我們同樣可以為平板裝置和行動手機裝置設定斷點。

桌上型設備

平板裝置

2.png

手機裝置

#在螢幕為600px 時新增媒體查詢，並設定新的樣式（畫面大於600px但小於768px）：

實例

#
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"> 
<title>php 中文网</title> 
<style>
* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-12 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
</style>
</head>
<body>

<div class="header">
<h1>Chania</h1>
</div>

<div class="row">
<div class="col-3 col-m-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>

<div class="col-6 col-m-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>

<div class="col-3 col-m-12">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>

</div>

<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

#以上程式碼看起來很多餘，但是他可以根據螢幕大小自動設定不同的樣式，所以還是非常必要的。

HTML 實例

針對桌面裝置:

第一和第三部分跨越 3 列。中間部分跨域 6 列。

針對平板裝置:

第一跨域3列，第二部分跨越9 列，第三部分跨域12 列：

<div class="row">
<div class="col-3 col-m-3">...<#/div >
<div#class="col-6 col-m-9">...</div>
<div class="col-3 col-m-12">...</div>
</div#>

方向：橫屏/垂直螢幕

結合CSS媒體查詢,可以建立適應不同裝置的方向(橫屏landscape、垂直螢幕portrait等)的佈局。

語法：

orientation：portrait | landscape

  • portrait：指定輸出裝置中的頁面可見區域高度大於或等於寬度

  • landscape：除portrait值狀況外，都是landscape

實例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"> 
<title>php 中文网</title> 
<style>
body {
    background-color: lightgreen;
}

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}
</style>
</head>
<body>
<p>重置浏览器大小，当文档的宽度大于高度时，背景会变为浅蓝色。否则为浅绿色。</p>
</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例