響應式 Web 設計 – 媒體查詢

2020-11-12 17:35 更新

響應式 Web 設計 - 媒體查詢

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

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

實例

如果瀏覽器窗口小于 500px, 背景將變?yōu)闇\藍色：

@media only screen and (max-width: 500px) {
body { background-color: lightblue;}}

嘗試一下 ?

添加斷點

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

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

桌面設備

手機設備

使用媒體查詢在 768px 添加斷點：

實例

當屏幕 (瀏覽器窗口) 小于 768px, 每一列的寬度是 100%:

/* 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%;}}

嘗試一下 ?

為移動端優(yōu)先設計

移動端優(yōu)先意味著在設計桌面和其他設備時優(yōu)先考慮移動端的設計。

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

我們在屏幕小于 768px 進行樣式修改，同樣在屏幕寬度大于 768px 時也需要修改樣式。以下是移動端優(yōu)先實例：

/* 為移動端設計: */
[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: 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%;}}

其他斷點

你可以根據(jù)自己的需要添加斷點。

我們同樣可以為平板設備和移動手機設備設置斷點。

桌面設備

平板設備

手機設備

在屏幕為 600px 時添加媒體查詢，并設置新的樣式（屏幕大于 600px 但小于 768px）：

實例

注意兩組類樣式是相同的，但名稱不同 (col- 和 col-m-):

/* For mobile phones: */
[class*="col-"] {width: 100%;}
@media only screen and (min-width: 600px) {   /* For tablets: */
.col-m-1 {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%;} }

嘗試一下 ?

以上代碼看起來很多余，但是他可以根據(jù)屏幕大小自動設置不同的樣式，所以還是非常必要的。

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 媒體查詢,可以創(chuàng)建適應不同設備的方向(橫屏 landscape、豎屏 portrait 等)的布局。

語法：

orientation：portrait | landscape

  • portrait：指定輸出設備中的頁面可見區(qū)域高度大于或等于寬度
  • landscape： 除 portrait 值情況外，都是 landscape

實例

如果是橫屏背景將是淺藍色：

@media only screen and (orientation: landscape) {
body { background-color: lightblue;}}

嘗試一下 ?
以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號