詳解使用CSS3的@media來編寫響應(yīng)式的頁面

首先要知道,我們?yōu)槭裁匆獙懽赃m應(yīng)的頁面(響應(yīng)式頁面)
眾所周知,電腦、平板、手機(jī)的屏幕是差距很大的,假如在電腦上寫好了一個頁面,在電腦上看起來不錯,但是如果放到手機(jī)上的話,那可能就會亂的一塌糊涂,這時候怎么解決呢?以前,可以再專門為手機(jī)定制一個頁面,當(dāng)用戶訪問的時候,判斷設(shè)備是手機(jī)還是電腦,如果是手機(jī)就跳轉(zhuǎn)到相應(yīng)的手機(jī)頁面,例如百度的就是,手機(jī)訪問www.baidu.com就會跳轉(zhuǎn)到m.baidu.com,這樣做簡直就是費(fèi)力不討好的活,所以聰明的程序員開發(fā)了一種自適應(yīng)寫法,即一次開發(fā),處處顯示!這到底是一個什么樣的神器東西呢,接下來就揭曉它的神秘面紗。
CSS3 的 @media 查詢
定義和使用
使用 @media 查詢,你可以針對不同的屏幕大小定義不同的樣式。 @media 可以針對不同的屏幕尺寸設(shè)置不同的樣式,特別是如果你需要設(shè)置設(shè)計響應(yīng)式的頁面,@media 是非常有用的。 當(dāng)你重置瀏覽器大小的過程中,頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面,這對調(diào)試來說是一個極大的便利。
CSS 語法
@media mediaType and|not|only (media feature) { /*CSS-Code;*/ }
媒體類型(mediaType )
類型有很多,在這里不一一列出來了,只列出了常用的幾個。
值 | 描述 |
---|---|
all | 用于所有設(shè)備 |
用于打印機(jī)和打印預(yù)覽 | |
screen | 用于電腦屏幕,平板電腦,智能手機(jī)等。(最常用) |
speech | 應(yīng)用于屏幕閱讀器等發(fā)聲設(shè)備 |
媒體功能(media feature)
媒體功能也有很多,以下列出常用的幾個
值 | 描述 |
---|---|
max-width | 定義輸出設(shè)備中的頁面最大可見區(qū)域?qū)挾?/td> |
min-width | 定義輸出設(shè)備中的頁面最小可見區(qū)域?qū)挾?/td> |
開始編寫響應(yīng)式頁面
編寫之前呢,有幾個要準(zhǔn)備的工作
準(zhǔn)備工作1:設(shè)置Meta標(biāo)簽
首先我們在使用 @media 的時候需要先設(shè)置下面這段代碼,來兼容移動設(shè)備的展示效果:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
這段代碼的幾個參數(shù)解釋:
- width = device-width:寬度等于當(dāng)前設(shè)備的寬度
- initial-scale:初始的縮放比例(默認(rèn)設(shè)置為1.0,即代表不縮放)
- user-scalable:用戶是否可以手動縮放(默認(rèn)設(shè)置為no,因為我們不希望用戶放大縮小頁面)
其他還有很多參數(shù)呢,想要了解的童鞋可以直接去百度
準(zhǔn)備工作2:加載兼容文件JS
因為IE8既不支持HTML5也不支持CSS3 @media ,所以我們需要加載兩個JS文件,來保證我們的代碼實(shí)現(xiàn)兼容效果:
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]-->
準(zhǔn)備工作3:設(shè)置IE渲染方式默認(rèn)為最高(可選)
現(xiàn)在有很多人的IE瀏覽器都升級到IE9以上了,所以這個時候就有又很多詭異的事情發(fā)生了,例如現(xiàn)在是IE9的瀏覽器,但是瀏覽器的文檔模式卻是IE8 為了防止這種情況,我們需要下面這段代碼來讓IE的文檔渲染模式永遠(yuǎn)都是最新的
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
這段代碼后面加了一個chrome=1,如果用戶的電腦里安裝了 chrome,就可以讓電腦里面的IE不管是哪個版本的都可以使用Webkit引擎及V8引擎進(jìn)行排版及運(yùn)算,如果沒有安裝,就顯示IE最新的渲染模式。
代碼實(shí)例
1、如果文檔寬度小于等于 300px 則應(yīng)用花括號內(nèi)的樣式——修改body的背景顏色(background-color):
@media screen and (max-width: 300px) { body { background-color:lightblue; } }
從上面的代碼可以看出,媒體類型是屏幕(screen),使用 一個 and 連接后面的媒體功能,這里寫的是 max-width:300px ,也就是說,當(dāng)屏幕的最大寬度 小于等于 300px 的時候,就應(yīng)用花括號里面的樣式。 2、當(dāng)文檔寬度大于等于300px 的時候顯示的樣式
@media screen and (min-width: 300px){ body { background-color:lightblue; } }
注意,這里的媒體功能使用的是 min-width 而不是 max-width,我已經(jīng)標(biāo)紅高亮顯示出來了。 3、當(dāng)文檔寬度大于等于 300px 并且小于等于500px 的時候顯示的樣式
注意,這里使用了兩個 and ,用來連接 兩個媒體功能,一個用于限制最小,一個用于限制最大。
※ 需要注意的地方(劃重點(diǎn))
1、通過靈活應(yīng)用以上技巧,開發(fā)出一個響應(yīng)式頁面,還不是近在咫尺的感覺_(:з」∠)_ 2、不要被 min-width 和 max-width 所迷惑,初學(xué)者很容易誤以為 min-width 的意思是小于xxx的時候才應(yīng)用,然而這就陷入誤區(qū)了,其實(shí)它的意思是:當(dāng)設(shè)置了 min-width 的時候,文檔的寬度如果小于設(shè)置的值,就不會應(yīng)用這個區(qū)塊里的CSS樣式,所以 min-width 它才能實(shí)現(xiàn)大于等于設(shè)置的值得時候,才會應(yīng)用區(qū)塊里的CSS樣式,max-width 也是如此。 3、或者這樣想想,先看代碼,這句代碼的意思是大于等于 300px ,小于等于 500px的時候應(yīng)用樣式
@media screen and (min-width:300px) and (max-width:500px) { /* CSS 代碼 */ }
min-width:300px 的作用是當(dāng)文檔寬度不小于 300px 的時候就應(yīng)用 {} 里的CSS代碼塊,即大于等于 300px max-width:500px 的作用是當(dāng)文檔寬度不大于 500px 的時候就應(yīng)用{} 里的CSS代碼塊,即小于等于 500px 是不是這樣想就容易明白了些呢? 4、這里有個彎很難繞過來,自己多動手做做實(shí)驗,多動腦想想,就豁然開朗了。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
css3 media 響應(yīng)式布局的簡單實(shí)例
下面小編就為大家?guī)硪黄猚ss3 media 響應(yīng)式布局的簡單實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-03- 下面小編就為大家?guī)硪黄猚ss3media響應(yīng)式布局實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-08
css3的@media屬性實(shí)現(xiàn)頁面響應(yīng)式布局示例代碼
使用css3的@media屬性可以實(shí)現(xiàn)頁面響應(yīng)式布局,下面有個不錯的示例,大家可以參考下2014-02-10詳解CSS3媒體查詢響應(yīng)式布局bootstrap 框架原理實(shí)戰(zhàn)(推薦)
這篇文章主要介紹了詳解CSS3媒體查詢響應(yīng)式布局bootstrap 框架原理實(shí)戰(zhàn)(推薦),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的2020-11-16