詳解使用CSS3的 media來編寫響應式的頁面

2022-09-26 19:15:15 字數 2531 閱讀 8843

首先要知道,我們為什麼要寫自適應的頁面(響應式頁面)

眾所周知,電腦、平板、手機的螢幕是差距很大的,假如在電腦上寫好了乙個頁面,在電腦上看起來不錯,但是如果放到手機上的話,那可能就會亂的一塌糊塗,這時候怎麼解決呢?以前,可以再專門為手機定製乙個頁面,當使用者訪問的時候,判斷裝置是手機還是電腦,如果是手機就跳轉到相應的手機頁面,例如百度的就是,手機訪問www.baidu.com就會跳轉到m.baidu.com,這樣做簡直就是費力不討好的活,所以聰明的程式設計師開發了一種自適應寫法,即一次開發,處處顯示!這到底是乙個什麼樣的神器東西呢,接下來就揭曉它的神秘面紗。

css3 的 @media 查詢

定義和使用

使用 @media 查詢,你可以針對不同的螢幕大小定義不同的樣式。 @media 可以針對不同的螢幕尺寸設定不同的樣式,特別是如果你需要設定設計響應式的頁面,@media 是非常有用的。 當你重置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面,這對除錯來說是乙個極大的便利。

css 語法

@media medi and|not|only (media feature)

**型別(mediatype )

型別有很多,在這裡不一一列出來了,只列出了常用的幾個。值描述

all用於所有裝置

print

用於印表機和列印預覽

screen

用於電腦螢幕,平板電腦,智慧型手機等。(最常用)

speech

應用於螢幕閱讀器等發聲裝置

**功能(media feature)

**功能也有很多,以下列出常用的幾個

程式設計客棧 值

描述max-width

定義輸出裝置中的頁面最大可見區域寬度

min-width

定義輸出裝置中的頁面最小可見區域寬度

開始編寫響應式頁面

編寫之前呢,有幾個要準備的工作

準備工作1:設定meta標籤

首先我們在使用 @media 的時候需程式設計客棧要先設定下面這段**,來相容移動裝置的展示效果:

這段**的幾個引數解釋:

其他還有很多引數呢,想要了解的童鞋可以直接去百度

準備工作2:載入相容檔案js

因為ie8既不支援html5也不支援css3 @mewww.cppcns.comdia ,所以我們需要載入兩個js檔案,來保證我們的**實現相容效果:

準備工作3:設定ie渲染方式預設為最高(可選)

現在有很多人的ie瀏覽器都公升級到ie9以上了,所以這個時候就有又很多詭異的事情發生了,例如現在是ie9的瀏覽器,但是瀏覽器的文件模式卻是ie8 為了防止這種情況,我們需要下面這段**來讓ie的文件渲染模式永遠都是最新的

這段**後面加了乙個chrome=1,如果使用者的電腦裡安裝了 chrome,就可以讓電腦裡面的ie不管是哪個版本的都可以使用webkit引擎及v8引擎進行排版及運算,如果沒有安裝,就顯示ie最新的渲染模式。

**例項

1、如果文件寬度小於等於 300px 則應用花括號內的樣式——修改body的背景顏色(background-color):

@media screen and (max-width: 300px)

}從上面的**可以看出,**型別是螢幕(screen),使用 乙個 and 連線後面的**功能,這裡寫的是 max-width:300px ,也就是說,當螢幕的最大寬度 小於等於 300px 的時候,就應用花括號裡面的樣式。 2、當文件寬度大於等於300px 的時候顯示的樣式

@media screen and (min-width: 300px)

}注意,這裡的**功能使用的是 min-width 而不是 max-width,我已經標紅高亮顯示出來了。 3、當文件寬度大於等於 300px 並且小於等於500px 的時候顯示的樣式

注意,這裡使用了兩個 and ,用來連線 兩個**功能,乙個用於限制最小,乙個用於限制最大。

※ 需要注意的地方(劃重點)

1、通過靈活應用以上技巧,開發出乙個響應式頁面,還不是近在咫尺的感覺_(:」∠)_ 2、不要被 min-width 和 max-width 所迷惑,初學者很容易誤以為 min-width 的意思是小於***的時候才應用,然而這就陷入誤區了,其實它的意思是:當設定了 min-width 的時候,文件的寬度如果小於設定的值,就不會應用這個區塊裡的css樣式,所以 min-width 它才能實現大於等於設定的值得時候,才會應用區塊裡的css樣式,max-width 也是如此。 3、或者這樣想想,先看**,這句**的意思是大於等於 300px ,小於等於 500px的時候應用樣式

@media screen and (min-width:300px) and (max-width:500px)

min-width:300px 的作用是當文件寬度不小於 300px 的時候就應用 {} 裡的css**塊,即大於等於 300px max-width:500px 的作用是當文件寬度不大於 500px 的時候就應用{} 裡的css**塊,即小於等於 500px 是不是這樣想就容易明白了些呢? 4、這裡有個彎很難繞過來,自己多動手做做實驗,多動腦想想,就豁然開朗了。

本文標題: 詳解使用css3的@media來編寫響應式的頁面

本文位址:

使用CSS3的 media來實現網頁自適應

如今,電腦顯示器的螢幕解析度向越來越大發展,而手機等移動裝置終端的解析度卻不可能大到 去。越來越多的 開始讓自己的頁面自適合各種解析度,在小解析度下顯示基本的內容,在大解析度下顯示全部功能,甚至是分多等級的多版本。作為web前端開發人員需要知道並且會用這種知識。css2裡面雖然支援 media屬性,...

使用CSS3的 media來編寫響應式的頁面

直接看乾貨 定義和使用 使用 media 查詢,你可以針對不同的螢幕大小定義不同的樣式。media 可以針對不同的螢幕尺寸設定不同的樣式,特別是如果你需要設定設計響應式的頁面,media 是非常有用的。當你重置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面,這對除錯來說是乙個極大的便...

使用CSS3的 media來編寫響應式的頁面

定義和使用 使用 media 查詢,你可以針對不同的螢幕大小定義不同的樣式。media 可以針對不同的螢幕尺寸設定不同的樣式,特別是如果你需要設定設計響應式的頁面,media 是非常有用的。當你重置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面,這對除錯來說是乙個極大的便利。css ...