解析媒體查詢@media的使用（附程式碼示範）
什麼是媒體查詢
媒體查詢可以讓我們根據裝置顯示器的特性（如視窗寬度、螢幕比例、裝置方向：橫向或縱向）為其設定CSS樣式，媒體查詢由媒體類型和一個或多個偵測媒體特性的條件表達式組成。媒體查詢中可用於偵測的媒體特性有 width 、 height 和 color （等）。使用媒體查詢，可以在不改變頁面內容的情況下，為特定的某些輸出裝置客製化顯示效果。
1、媒體查詢操作方式
實際操作為：對裝置提出詢問（稱作表達式）開始，如果表達式結果為真，媒體查詢中的CSS被應用，如果表達式結果為假，媒體查詢內的CSS將被忽略。
2、媒體查詢語法
@media screen and (max-width:600px) {
}3、程式碼示範1qqq
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.row{
border: 1px solid red;
}
.col{
display: inline-block;
width: 100%;
height: 100px;
background-color: green;
}
/* <768px */
@media screen and (max-width:768px) {
.col{
width: 100%;
}
}
/* >=992 and */
@media screen and (min-width:992px){
.col{
width: 49%;
}
}
/* >=768px and <1200px */
@media screen and (min-width:768px) and (max-width:1200px){
.col{
width: 48%;
}
}
/* >=1200px */
@media screen and (min-width: 1200px) {
.col{
width: 33%;
}
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>縮小到768px後的效果圖
# 推薦學習：《web前端》
以上是解析媒體查詢@media的使用（附程式碼示範）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
使用 CSS Viewport 單位 vh 和 vmin 建立媒體查詢的技巧
Sep 13, 2023 am 11:18 AM
使用CSSViewport單位vh和vmin創建媒體查詢的技巧隨著行動裝置的普及，響應式設計已成為現代網頁設計的必備技術。為了適應不同大小的螢幕，開發人員需要透過媒體查詢來調整佈局和樣式。而在媒體查詢中，最常用的單位是像素（px）。然而，CSS3引入了一種新的視窗單位，即vh和vmin，它們能夠更好地適應不同設備尺寸。本文將介紹如何使用vh和v
css媒體查詢失效怎麼辦
Jan 28, 2023 pm 03:29 PM
css媒體查詢失效的解決方法：1、修改語法如「@media screen and (max-width:768px){...}」；2、在html頭檔加入必要的meta標籤；3、將媒體查詢語句放在原css文檔後面即可。
CSS 響應式佈局屬性指南：media queries 和 min-width/max-width
Oct 20, 2023 pm 02:19 PM
CSS響應式佈局屬性指南：mediaqueries和min-width/max-width隨著行動裝置的普及，越來越多的用戶透過手機和平板電腦來造訪網站。這就要求網站能夠適應不同螢幕尺寸和裝置類型，以提供更好的使用者體驗。 CSS響應式佈局是一種解決方案，能夠讓網頁內容在不同裝置上自動適應佈局和樣式。在實現CSS響應式佈局時，我們經常使用兩個重要的
CSS 媒體查詢屬性探索：@media 和 min-device-width/max-device-width
Oct 20, 2023 pm 07:18 PM
CSS媒體查詢屬性探索：@media和min-device-width/max-device-width，需要具體程式碼範例引言:隨著行動裝置的普及，網站的響應式設計變得越來越重要。而在實作響應式設計時，CSS媒體查詢屬性扮演著至關重要的角色。本文將深入探討@media和min-device-width/max-device-width兩個媒體查詢屬性，並
CSS媒體查詢完整指南（Media Quires）
Sep 29, 2022 pm 08:41 PM
這篇文章帶大家學習CSS媒體查詢（Media Quires），詳細介紹了媒體查詢語法定義，從三個具體佈局範例學習媒體查詢的使用技巧；並介紹了一些scss、css屬性知識。
選擇適合實現響應式佈局的單位有哪些？
Jan 27, 2024 am 09:39 AM
選擇什麼單位來實現響應式佈局？隨著行動裝置和平板電腦的普及，越來越多的人使用各種裝置來瀏覽網頁。為了確保網頁在不同裝置上具有良好的可讀性和使用者體驗，響應式佈局逐漸成為了設計和開發中的重要考量。而在實現響應式佈局時，選擇合適的單位非常重要。本文將分析幾種常見的單位，以幫助讀者選擇合適的單位來實現響應式佈局。像素（px）：像素是最常見的長度單位，表示螢幕上一
解析媒體查詢@media的使用（附程式碼示範）
Aug 07, 2022 pm 04:48 PM
媒體查詢可讓我們根據裝置顯示器的特性（如視窗寬度、螢幕比例、裝置方向：橫向或縱向）為其設定CSS樣式，媒體查詢由媒體類型和一個或多個偵測媒體特性的條件式組成。
CSS 寬度屬性最佳化技巧：max-width 和 min-width
Oct 24, 2023 am 11:36 AM
CSS寬度屬性最佳化技巧：max-width和min-width在網頁設計和開發中，設定元素的寬度是常見的任務。為了讓網頁在不同尺寸的螢幕上呈現良好的效果，我們經常使用max-width和min-width屬性來控制元素的寬度。本文將介紹如何使用這兩個屬性來最佳化網頁的設計，同時給出一些具體的程式碼範例。使用max-width控制元素的最大寬
