當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS3 @media媒体查询适配不同尺寸设备的响应式布局（清晰详解）

發布時間：2025/3/12 CSS 55 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3 @media媒体查询适配不同尺寸设备的响应式布局（清晰详解）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

隨著寬屏的不斷普及，CSS3出現了@media媒體查詢技術

一、了解@Media 相關知識

1、了解Media Queries

Media Queries能在不同的條件下使用不同的樣式，使頁面在不同在終端設備下達到不同的渲染效果。其原理就是允許添加表達式用以媒體查詢（包括媒體類型和媒體特性），以此來選擇不同的樣式表，從而自動適應不同的屏幕分辨率。

css2里面雖然支持@media屬性，但是能實現的功能比較少，一般只用做打印的時候做特殊定義的CSS，我們不去討論。

css3的@media屬性在CSS3里面已經演變成一種 media queries（媒體查詢/匹配）了,在CSS3里面，可以用查詢語句來匹配各種類型的屏幕。

2、了解@media 和?@media screen的區別

@media screen的css在打印設備里是無效的，而@media在打印設備里是有效的，如果css需要用在打印設備里，那么就用@media ，否則，就用@media screen。不過這只是籠統的做法，其實如果把“screen”換為“print”，寫為@media print，那么該css就可用到打印設備上了，但要注意，@media print聲明的css只能在打印設備上有效。

3、了解CSS中的width、device-width、resolution、aspect-ratio

width/height?：定義輸出設備中的?頁面可見區域寬度/高度。

device-width/height? ：定義輸出設備的屏幕可見寬/高度。

resolution ：定義設備的分辨率。如：96dpi, 300dpi, 118dpcm

aspect-ratio ：定義輸出設備中的頁面可見區域寬度與高度的比率。

4、了解media樣式的使用方法

4.1、一種方法是直接在link中判斷設備的尺寸，然后引用不同的css文件：

? ? demo如下：當前屏幕的寬度大于等于400px時應用 styleA.css樣式文件。。

4.2、另一種方法是直接寫在 style 標簽里：

@media mediatype and|not|only (media feature) {CSS-Code;}

demo如下：screen 是媒體類型里的一種，CSS2.1定義了多種媒體類型

? ?上述格式是中使用“@media”開頭，然后指定媒體類型（理解為設備類型），隨后是指定媒體特性（理解為屏幕尺寸），其中還包括關鍵字and 、 not(排除某種設備)、only(限定某種設備)

多媒體類型 mediatype

值描述

all	用于所有多媒體類型設備
print	用于打印機
screen	用于電腦屏幕，平板，智能手機等。
speech	用于屏幕閱讀器

多媒體特性 media feature

媒體特性是通過min來表示大于等于或max表示小于做為邏輯判斷，

值描述

aspect-ratio	定義輸出設備中的頁面可見區域寬度與高度的比率
color	定義輸出設備每一組彩色原件的個數。如果不是彩色設備，則值等于0
color-index	定義在輸出設備的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等于0
device-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的比率。
device-height	定義輸出設備的屏幕可見高度。
device-width	定義輸出設備的屏幕可見寬度。
grid	用來查詢輸出設備是否使用柵格或點陣。
height	定義輸出設備中的頁面可見區域高度。
max-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的最大比率。
max-color	定義輸出設備每一組彩色原件的最大個數。
max-color-index	定義在輸出設備的彩色查詢表中的最大條目數。
max-device-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的最大比率。
max-device-height	定義輸出設備的屏幕可見的最大高度。
max-device-width	定義輸出設備的屏幕最大可見寬度。
max-height	定義輸出設備中的頁面最大可見區域高度。
max-monochrome	定義在一個單色框架緩沖區中每像素包含的最大單色原件個數。
max-resolution	定義設備的最大分辨率。
max-width	定義輸出設備中的頁面最大可見區域寬度。
min-aspect-ratio	定義輸出設備中的頁面可見區域寬度與高度的最小比率。
min-color	定義輸出設備每一組彩色原件的最小個數。
min-color-index	定義在輸出設備的彩色查詢表中的最小條目數。
min-device-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的最小比率。
min-device-width	定義輸出設備的屏幕最小可見寬度。
min-device-height	定義輸出設備的屏幕的最小可見高度。
min-height	定義輸出設備中的頁面最小可見區域高度。
min-monochrome	定義在一個單色框架緩沖區中每像素包含的最小單色原件個數
min-resolution	定義設備的最小分辨率。
min-width	定義輸出設備中的頁面最小可見區域寬度。
monochrome	定義在一個單色框架緩沖區中每像素包含的單色原件個數。如果不是單色設備，則值等于0
orientation	定義輸出設備中的頁面可見區域高度是否大于或等于寬度。（檢測設備目前處于橫向還是縱向狀態。）
resolution	定義設備的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定義電視類設備的掃描工序。
width	定義輸出設備中的頁面可見區域寬度。

and / not / only / all

not: not是用來排除掉某些特定的設備的，比如 @media not print（非打印設備）。

only: 用來定某種特別的媒體類型。

對于支持 Media Queries 的移動設備來說，如果存在 only 關鍵字，移動設備的 Web 瀏覽器會忽略 only關鍵字并直接根據后面的表達式應用樣式文件。
對于不支持 Media Queries 的設備但能夠讀取 Media Type 類型的 Web瀏覽器，遇到 only 關鍵字時會忽略這個樣式文件。only用來指定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器。

all: 所有設備，這個應該經常看到。在Media Query中如果沒有明確指定Media Type，那么其默認為all

demo1：可以使用關鍵詞"and"將多個媒體特性結合在一起。也就是說，一個Media Query中可以包含0到多個表達式，表達式又可以包含0到多個關鍵字，以及一種媒體類型。當屏幕在600px~900px之間時，body的背景色渲染為“#f5f5f5”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){body {background-color:#f5f5f5;} }

? ? ? ? ?demo2：可以使用多條語句來將同一個樣式應用于不同的媒體類型和媒體特性中。style.css樣式被用在寬度小于或等于480px的手持設備上，或者被用于屏幕寬度大于或等于960px的設備上，如下所示

<linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

上面代碼中style.css樣式被用在寬度小于或等于480px的手持設備上，或者被用于屏幕寬度大于或等于960px的設備上。也

demo3：注意因為<style>標簽中后面的樣式會覆蓋前面的樣式，所以要注意不能順序錯誤，如下會導致不能實現根據不同尺寸查詢渲染，如下所示

@media (min-width: 992px){ //>=992的設備 } @media (min-width: 768px){ //>=768的設備 }

demo4：實現橫屏和豎屏的媒體查詢

/* 豎屏 */

@media screen and (orientation: portrait) and (max-width: 720px) { 對應樣式 }

/* 橫屏 */

@media screen and (orientation: landscape) { 對應樣式 }

@media實踐

到目前為止，CSS3 Media Queries得到了眾多瀏覽器支持，除了IE6-8瀏覽器不支持之外，在所有現代瀏覽器中都可以完美支持。還有一個與眾不同的是，Media Queries在其他瀏覽器中不要像其他CSS3屬性一樣在不同的瀏覽器中添加前綴。

1、兼容低版本IE瀏覽器的響應式布局開發

步驟1、兼容移動設備展示效果，需要在?<head>?之中添加 viewport 元數據標簽。

其中width = device-width表示顯示寬度等于當前設備的寬度，initial-scale初始的縮放比例（默認設置為1.0），maximum-scale允許用戶縮放到的最大比例（默認設置為1.0），??user-scalable禁止用戶手動縮放頁面（默認設置為no）；

步驟2、加載兼容性文件

因為IE8既不支持HTML5也不支持CSS3 Media，所以我們需要加載兩個JS文件，來保證我們的代碼實現兼容效果；其中Respond.js 為 IE6-8 以及其它不支持?CSS3 Media Queries 的瀏覽器提供媒體查詢的?min-width 和 max-width 特性，實現響應式網頁設計（Responsive Web Design）。html5shiv.js使ie9以下瀏覽器能識別html5新增標簽。

為提供跨瀏覽器的高度一致性，我們還可以加載Normalize.css，已被用于Twitter Bootstrap，HTML5 Boilerplate，GOV.UK，Rdio，CSS Tricks以及許許多多其他的框架，工具和網站上。normalize.css下載

步驟3、設置IE渲染方式默認為最高(這部分可以選擇添加也可以不添加)

現在有很多人的IE瀏覽器都升級到IE9以上了，所以這個時候就有又很多詭異的事情發生了，例如現在是IE9的瀏覽器，但是瀏覽器的文檔模式卻設置是IE8。為了防止這種情況，我們需要下面這段代碼來讓IE的文檔模式永遠都是最新的：

?（如果想指定使用IE版本，可寫成：<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">）

一個更給力的寫法：

怎么這段代碼后面加了一個chrome=1，這個Google Chrome Frame（谷歌內嵌瀏覽器框架GCF），如果有的用戶電腦里面裝了這個chrome的插件，就可以讓電腦里面的IE不管是哪個版本的都可以使用Webkit引擎及V8引擎進行排版及運算，無比給力，不過如果用戶沒裝這個插件，那這段代碼就會讓IE以最高的文檔模式展現效果。這段代碼我還是建議你們用上，不過不用也是可以的。

步驟3、響應式布局開發（媒體查詢來設置不同樣式、使用響應式字體rem單位、圖片自適應處理）

在創建響應式布局的時候習慣先寫非響應式布局，頁面固定寬度大小，我覺得這個對在座的各位沒有任何難度。如果完成了非響應式那么我在去添加媒體查詢（Media Query)和響應式代碼。這種操作更容易實現響應式特性。

// 媒體查詢來設置不同樣式

應用于超大屏顯示器下的樣式,加入一個終端的分辨率大于1920px，這里的樣式將覆蓋之前所定義的樣式

@media screen and (min-width:1920px){ #head { }#content { }#footer { } }

// 使用響應式字體rem單位

css3引入了新的單位叫做rem,和em類似但對于Html元素，rem更方便使用。rem是相對于根元素的，不要忘記重置根元素字體大小：

html{font-size:625%;} 完成后，你可以定義響應式字體： @media (min-width:640px){body{font-size:0.12rem;}} @media (min-width:960px){body{font-size:0.14rem;}} @media (min-width:1200px){body{font-size:0.16rem;}}

// 圖片拉伸自適應使用max-width

#wrap img{max-width:100%;height:auto; }

上述代碼中ID為wrap內的圖片會根據wrap的寬度改變已達到等寬擴充，height為auto的設置是為了保證圖片原始的高寬比例，以至于圖片不會失真。

// 背景圖片拉伸自適應使用CSS3的background-size

#log a{display:block;width:100%;height:40px;text-indent:55rem;background-img:url(logo.png);background-repeat:no-repeat;background-size:100% 100%;} background-size是css3的新屬性，用于設置背景圖片的大小，有兩個可選值，第一個值用于指定背景圖的width,第2個值用于指定背景圖的height,如果只指定一個值，那么另一個值默認為auto。 background-size:cover; 等比擴展圖片來填滿元素 background-size:contain; 等比縮小圖片來適應元素的尺寸

2、前端bootstrap響應式框架

bootstrap柵格系統詳解：https://v3.bootcss.com/css/#grid

在柵格系統中，我們在 Less 文件中使用以下媒體查詢（media query）來創建關鍵的分界點閾值。

/* 超小屏幕（手機，小于 768px） */ /* 沒有任何媒體查詢相關的代碼，因為這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優先的嗎？） *//* 小屏幕（平板，大于等于 768px） */ @media (min-width: @screen-sm-min) { ... }/* 中等屏幕（桌面顯示器，大于等于 992px） */ @media (min-width: @screen-md-min) { ... }/* 大屏幕（大桌面顯示器，大于等于 1200px） */ @media (min-width: @screen-lg-min) { ... }

可以看到在其柵格布局中不同的類前綴代表的是不同屏幕尺寸下的應用

?超小屏幕?手機 (<768px)小屏幕?平板 (≥768px)中等屏幕?桌面顯示器 (≥992px)大屏幕?大桌面顯示器 (≥1200px)柵格系統行為.container?最大寬度類前綴

總是水平排列	開始是堆疊在一起的，當大于這些閾值時將變為水平排列C
None （自動）	750px	970px	1170px
.col-xs-	.col-sm-	.col-md-	.col-lg-

擴展知識：

1、單位pixel-ratio/dpi/dppx區別?

? ?dpi 屬性：??每英寸包含點的數量（dots per inch）

? ?dppx 屬性:? 每像素包含點的數量（dots per pixel）。

? ?dpcm 屬性:? 每厘米包含點的數量（dots per centimeter）

? 注意：

普通屏幕通常包含96dpi，一般將2倍于此的屏幕稱之為高分屏，即大于等于192dpi的屏幕，比如Mac視網膜屏就達到了192dpi（即2dppx），打印時一般會需要更大的dpi；
1dppx = 96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

PS: 圖片在iphone中模糊的原因

iphone 的物理分辨率是 320X480，但是呈現的內容卻是 640×960，但其實我們設置的 css px 是相對于物理分辨率的，即 320×480，但是因為我們設置的 css px 要顯示在更寬闊的 640×960 的內容區域里頭，所以10個 css px 在 640×960 的呈現效果就相當于5個 device px 在 320×480 的呈現效果。

所以如果圖片得大小是100×100，那么到iphone里頭就會被放大2倍，于是圖像會變得比以前模糊，通常得解決辦法是，用 background-size 設置為50%，以前的一半，然后再在 iphone 放大2倍，等于沒變化，恢復到正常效果，不模糊了。

2、PC端按屏幕尺寸整理

分辨率 ? 比例 | 設備尺寸

1024*500 （8.9寸）
1024*768 （比例4：3 ?| 10.4寸、12.1寸、14.1寸、15寸; ）
1280*800（16：10 ?|15.4寸）
1280*1024(比例：5：4 ?| 14.1寸、15.0寸)
1280*854(比例：15：10 | 15.2）
1366*768 (比例：16：9 | 不常見）
1440*900 （16：10 ?17寸僅蘋果用）
1440*1050（比例：5：4 ?| 14.1寸、15.0寸）
1600*1024（14：9 ?不常見）
1600*1200 （4：3 | 15、16.1）
1680*1050（16：10 | 15.4寸、20.0寸）
1920*1200 (23寸）

通過上面的電腦屏蔽及尺寸的例表上我們得到了幾個寬度
1024 ?1280 ?1366 ?1440 ?1680 ?1920 ?

CSS代碼

@media (min-width: 1024px){
? body{font-size: 18px}
} /*>=1024的設備*/
@media (min-width: 1100px) {
? body{font-size: 20px}
} /*>=1024的設備*/
@media (min-width: 1280px) {
? body{font-size: 22px;}
}?
@media (min-width: 1366px) {
? body{font-size: 24px;}
} ?
@media (min-width: 1440px) {
? body{font-size: 25px !important;}
}?
@media (min-width: 1680px) {
? body{font-size: 28px;}
}?
@media (min-width: 1920px) {
? body{font-size: 33px;}
}?

3、bootstrap柵格系統簡介

Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易于使用的預定義類，還有強大的minxin?用于生成更具語義的布局。柵格系統用于通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。下面就介紹一下 Bootstrap 柵格系統的工作原理：

“行（row）”必須包含在?.container?（固定寬度）或?.container-fluid?（100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
通過“行（row）”在水平方向創建一組“列（column）”。
你的內容應當放置于“列（column）”內，并且，只有“列（column）”可以作為行（row）”的直接子元素。
類似?.row?和?.col-xs-4?這種預定義的類，可以用來快速創建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創建語義化的布局。
通過為“列（column）”設置?padding?屬性，從而創建列與列之間的間隔（gutter）。通過為?.row?元素設置負值?margin?從而抵消掉為?.container?元素設置的?padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
負值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內容排成一行。
柵格系統中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個?.col-xs-4?來創建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。
柵格類適用于與屏幕寬度大于或等于分界點大小的設備，并且針對小屏幕設備覆蓋柵格類。因此，在元素上應用任何?.col-md-*柵格類適用于與屏幕寬度大于或等于分界點大小的設備，并且針對小屏幕設備覆蓋柵格類。因此，在元素上應用任何?.col-lg-*不存在，也影響大屏幕設備。

學習網址：

http://www.511yj.com/media-media-screen.html

https://blog.csdn.net/leaves_yu/article/details/79280389

https://blog.csdn.net/gtlishujie/article/details/81975157

https://v3.bootcss.com/css/#grid

總結

以上是生活随笔為你收集整理的CSS3 @media媒体查询适配不同尺寸设备的响应式布局（清晰详解）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： C指针原理（40）-递归(1)
下一篇： css 图片换行_这个开源库教你写高级的