CSS 媒體查詢(Media Queries)介紹

CSS 媒體查詢是一種強大的網頁開發技術,允許我們根據不同的設備特性(如螢幕寬度、高度、方向或解析度等)來應用不同的樣式規則。它是響應式網頁設計的基礎,讓網站能夠在各種裝置上呈現最佳的使用體驗。
媒體查詢的基本概念
媒體查詢的核心思想是「條件式樣式」—當特定條件滿足時,相應的 CSS 規則才會被應用。這些條件通常與用戶的設備或瀏覽環境有關。
基本語法如下:
css@media 媒體類型 and (媒體特性) {
/* 當條件符合時應用的 CSS 規則 */
}
媒體類型
媒體類型指定了查詢適用的設備類別,常見的有:
screen
:用於電腦螢幕、平板和手機屏幕print
:用於列印預覽和打印頁面all
:適用於所有設備類型(預設值)speech
:用於螢幕閱讀器等語音合成設備
媒體特性
媒體特性描述了設備的具體特徵,例如:
width
、min-width
、max-width
:視窗寬度height
、min-height
、max-height
:視窗高度orientation
:設備方向(portrait 豎屏或 landscape 橫屏)resolution
:設備的解析度aspect-ratio
:視窗的寬高比color
:設備的色彩位元數
實際應用範例
基本響應式設計例子
css/* 在桌面端顯示的樣式 */
.container {
width: 1200px;
margin: 0 auto;
}
/* 在平板上的樣式 */
@media screen and (max-width: 1024px) {
.container {
width: 90%;
}
}
/* 在手機上的樣式 */
@media screen and (max-width: 768px) {
.container {
width: 100%;
padding: 0 15px;
}
}
根據設備方向調整佈局
css/* 橫屏模式的樣式 */
@media screen and (orientation: landscape) {
.sidebar {
float: left;
width: 30%;
}
.main-content {
float: right;
width: 70%;
}
}
/* 豎屏模式的樣式 */
@media screen and (orientation: portrait) {
.sidebar, .main-content {
width: 100%;
float: none;
}
}
針對列印優化的樣式
css/* 普通屏幕顯示樣式 */
nav, footer, .ads {
display: block;
}
/* 列印時的樣式 */
@media print {
nav, footer, .ads {
display: none; /* 隱藏不需要的元素 */
}
body {
font-size: 12pt; /* 設定適合列印的字體大小 */
color: black;
}
a::after {
content: " (" attr(href) ")"; /* 顯示連結的 URL */
}
}
媒體查詢與響應式設計的發展
響應式網頁設計(Responsive Web Design)概念由 Ethan Marcotte 在 2010 年提出,隨著智慧型裝置的普及,媒體查詢變得越來越重要。現在,移動優先(Mobile First)的設計理念更是得到廣泛推崇,即先設計移動端的界面,再逐步擴展到更大的屏幕。
css/* 移動優先的設計方式 */
.container {
width: 100%; /* 默認為移動端樣式 */
padding: 0 15px;
}
/* 平板及以上設備 */
@media screen and (min-width: 768px) {
.container {
width: 750px;
padding: 0;
margin: 0 auto;
}
}
/* 桌面設備 */
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
}
}
現代技術發展
隨著 CSS Grid 和 Flexbox 的普及,媒體查詢的應用變得更加靈活。許多時候,我們可以通過這些新佈局技術減少媒體查詢的使用,實現更為流暢的響應式設計。
總結來說,CSS 媒體查詢是現代網頁開發中不可或缺的工具,讓我們能夠為不同設備提供最佳的用戶體驗。掌握媒體查詢,是成為一名優秀的前端開發者的重要一步。
網頁設計中的進階媒體查詢方案
媒體查詢技術在不斷發展,除了基本的螢幕尺寸響應外,現代網頁設計中還有許多進階的媒體查詢方案。這些方案能夠更精確地適應各種使用情境,提供更好的用戶體驗。
容器查詢 (Container Queries)
容器查詢是一項相對較新的技術,它允許元素根據其父容器的大小而不是視窗大小進行樣式調整。這對於可重用的組件特別有用。
css/* 先定義一個容器 */
.card-container {
container-type: inline-size;
container-name: card;
}
/* 根據容器寬度調整卡片樣式 */
@container card (width < 400px) {
.card {
flex-direction: column;
}
}
@container card (width >= 400px) {
.card {
flex-direction: row;
}
}
容器查詢解決了一個長期存在的問題:相同組件在不同佈局位置可能需要不同的呈現方式。在容器查詢出現之前,這通常需要添加額外的類名或更複雜的媒體查詢組合。
用戶偏好媒體查詢 (User Preference Media Queries)
這些查詢允許網站根據用戶在作業系統或瀏覽器中的偏好設置來調整樣式。
深色模式偏好
css@media (prefers-color-scheme: dark) {
:root {
--background-color: #121212;
--text-color: #ffffff;
}
}
@media (prefers-color-scheme: light) {
:root {
--background-color: #ffffff;
--text-color: #121212;
}
}
減少動畫偏好
適用於那些對動畫敏感或有前庭障礙的用戶:
css@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.0001s !important;
transition-duration: 0.0001s !important;
}
}
對比度偏好
css@media (prefers-contrast: high) {
:root {
--contrast-color: black;
--background-color: white;
}
}
特定裝置功能查詢
觸控能力查詢
css@media (hover: hover) {
/* 用戶使用滑鼠等可以懸停的設備 */
.button:hover {
background-color: #ff9900;
}
}
@media (hover: none) {
/* 觸控設備,不支持懸停 */
.button {
padding: 12px 24px; /* 更大的點擊區域 */
}
}
指針精度查詢
css@media (pointer: fine) {
/* 精確指針設備,如滑鼠 */
.link {
font-size: 14px;
}
}
@media (pointer: coarse) {
/* 粗略指針設備,如觸控螢幕 */
.link {
font-size: 16px;
padding: 8px;
}
}
視口段 (Viewport Segments)
適用於可折疊裝置,如雙螢幕手機:
css@media (spanning: single-fold-vertical) {
/* 針對垂直折疊的雙螢幕設備 */
.container {
display: grid;
grid-template-columns: env(fold-left) 1fr;
}
}
特徵查詢結合 (Feature Queries)
@supports
可以與媒體查詢結合使用,檢測瀏覽器是否支持特定的 CSS 特性:
css@media (min-width: 768px) {
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}
@supports not (display: grid) {
/* 後備方案,為不支援 Grid 的瀏覽器提供 */
.container {
display: flex;
flex-wrap: wrap;
}
.item {
width: 30%;
}
}
}
嵌套媒體查詢
CSS 嵌套中的媒體查詢是一個新興的功能,讓代碼組織更加清晰:
css.card {
padding: 16px;
@media (min-width: 768px) {
padding: 24px;
}
.card-title {
font-size: 18px;
@media (min-width: 768px) {
font-size: 24px;
}
}
}
邏輯運算符的使用
媒體查詢中可以使用邏輯運算符組合多個條件:
css/* 使用 and 運算符 */
@media (min-width: 768px) and (orientation: landscape) {
/* 適用於寬度至少為768px且橫向的設備 */
}
/* 使用 or 運算符(逗號) */
@media (max-width: 600px), (orientation: portrait) {
/* 適用於寬度最大為600px或豎向的設備 */
}
/* 使用 not 運算符 */
@media not all and (orientation: portrait) {
/* 適用於非豎向的設備 */
}
/* 新的 or 語法 */
@media (width <= 600px) or (orientation: portrait) {
/* 使用新的比較運算符和明確的or關鍵字 */
}
響應式設計的策略性方案
內容優先策略
不只關注尺寸,還關注內容的可讀性和可用性:
css@media (max-width: 30em) {
/* 窄視口內容調整 */
}
@media (min-width: 30em) and (max-width: 50em) {
/* 中等視口內容調整 */
}
@media (min-width: 50em) {
/* 寬視口內容調整 */
}
螢幕比例設計
css/* 寬屏比例設計 */
@media (min-aspect-ratio: 16/9) {
.header {
height: 20vh;
}
.content {
columns: 2;
}
}
自適應設計方案
結合媒體查詢和 CSS 變量實現更靈活的自適應設計:
css:root {
--padding: 1rem;
--columns: 1;
}
@media (min-width: 600px) {
:root {
--padding: 2rem;
--columns: 2;
}
}
@media (min-width: 900px) {
:root {
--columns: 3;
}
}
.grid {
padding: var(--padding);
display: grid;
grid-template-columns: repeat(var(--columns), 1fr);
}
新興技術與未來趨勢
範圍媒體查詢
未來的 CSS 可能支援更簡潔的範圍語法:
css@media (width: 600px to 1000px) {
/* 適用於寬度在 600px 到 1000px 之間的設備 */
}
環境變量與適應性設計
cssbody {
/* 適應頂部安全區域(如瀏海屏) */
padding-top: env(safe-area-inset-top);
/* 適應底部安全區域(如手勢區域) */
padding-bottom: env(safe-area-inset-bottom);
}
更智能的自適應排版
使用 CSS 變量和 calc() 實現響應式排版:
css:root {
--font-size-min: 16;
--font-size-max: 24;
--viewport-min: 320;
--viewport-max: 1200;
/* 計算流體字體大小 */
--font-size-fluid: calc(
(var(--font-size-min) * 1px) +
(var(--font-size-max) - var(--font-size-min)) *
(100vw - (var(--viewport-min) * 1px)) /
(var(--viewport-max) - var(--viewport-min))
);
}
body {
font-size: var(--font-size-fluid);
}
媒體查詢技術的不斷發展,為網頁設計師提供了更多工具來創建適應不同設備和用戶需求的網站。隨著新設備形態的出現,如可折疊手機、AR/VR 裝置等,媒體查詢的應用場景將會更加多元化,持續推動網頁設計的進步與創新。
-
JavaScript 中的防抖與節流:簡單明瞭的前端解析
Published on 2025-03-14 18:10:00 -
行動網頁設計的好幫手HTML capture讓用戶直接使用手機的麥克風與鏡頭!
Published on 2025-03-13 17:40:00 -
圖示設計實用指南:提供圖示設計的實用技巧與建議,包含UX和UI設計推薦,幫助設計師創建清晰、簡潔且具吸引力的圖示。
Published on 2025-03-08 19:20:00 -
CSS Grid是網頁設計中2D排版的好幫手!repeat() 與minmax()的應用介紹
Published on 2025-03-07 17:30:00 -
流動式版面設計 (Fluid Layout) 指南:網頁設計的演變趨勢
Published on 2025-03-06 14:20:00 -
HTML輸入元素input少見屬性pattern介紹,設計網頁時可以試試
Published on 2025-03-06 13:50:00 -
數位身份的隱形印記:深入解析Canvas指紋追蹤技術
Published on 2025-03-05 15:30:00 -
強大的CSS變數功能!為新式網頁設計創建可維護、可擴展的樣式!
Published on 2025-03-04 00:30:00 -
設計使用者網頁介面的最佳實踐,如何有效提升UI設計!
Published on 2025-03-02 15:30:00 -
列項符號也可以增加動畫效果!CSS ::marker 選擇器使用教學!
Published on 2025-03-01 21:30:00 -
自適應網頁設計使用夾鉗參數讓網站更美觀clamp()使用介紹!
Published on 2025-03-01 21:00:00 -
網頁設計中推薦使用CSS Anchor定位元素!可以更靈活配置版面!
Published on 2025-03-01 00:10:00 -
利用scroll-margin設計網頁可以有效提升客戶體驗
Published on 2025-02-28 19:00:00 -
interpolate-size讓我的網頁動畫原始碼更精簡!
Published on 2025-02-27 21:40:00 -
網頁設計的革命:當上帝視角UX成為未來趨勢
Published on 2025-02-26 15:40:00 -
3D網頁設計CSS必學重點:preserve-3d與flat!
Published on 2025-02-25 20:50:00 -
前端網頁設計動畫套件anime easing介紹與範例
Published on 2025-02-10 00:00:00 -
網頁設計的關鍵原則米勒定律,由心理學解釋人類注意力所衍生的設計要點。
Published on 2025-02-02 17:00:00 -
NPU是甚麼?詳細解說CPU、GPU、NPU、TPU!
Published on 2024-10-31 14:00:00 -
環保公司網頁設計案例:樺欣環保工程有限公司官網建置
Published on 2024-09-19 18:00:00 -
選擇網頁設計公司依據地圖評價準確嗎?
Published on 2024-09-15 12:00:00 -
網頁設計中推薦使用Anchor定位元素的新方法!
Published on 2024-08-28 23:40:00 -
甚麼是ARM伺服器?
Published on 2024-06-22 00:00:00 -
自行架設網站的優缺點分析
Published on 2024-03-10 18:00:00 -
房地產網頁設計案例:詠騰工業不動產官網架設
Published on 2023-12-31 10:50:00 -
無障礙網站設計與無障礙標章檢測等級
Published on 2023-10-29 14:10:00 -
如何挑選出穩健的網頁設計公司
Published on 2023-09-16 14:30:00 -
網頁設計報價計算方式有哪些?
Published on 2023-08-11 12:00:00 -
新竹山溪地高爾夫球場網頁設計規劃介紹
Published on 2023-04-27 12:20:00