資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用CSS媒體查詢實現常見裝置斷點？
媒體查詢用於設定網頁的響應式設計。它允許使用者根據不同的螢幕尺寸設定不同的樣式。這些螢幕尺寸主要包括桌面電腦、平板電腦和移動裝置。讓我們首先設定不同的螢幕尺寸，即設定常見的裝置斷點。
不同的螢幕尺寸
常見的裝置斷點是指不同裝置及其螢幕尺寸，例如：
手機 − 螢幕寬度小於768畫素
平板電腦 − 螢幕寬度大於等於768畫素
小型筆記型電腦 − 螢幕寬度大於等於992畫素
筆記型電腦和臺式電腦 − 螢幕寬度大於等於1200畫素
最大寬度為600畫素的螢幕
當螢幕尺寸小於600畫素時，使用`background-color`屬性設定以下背景顏色：
@media only screen and (max-width: 600px) {
body {
background: blue;
}
}
最小寬度為600畫素的螢幕
當螢幕尺寸大於600畫素但小於768畫素時，使用`background-color`屬性設定以下背景顏色：
@media only screen and (min-width: 600px) {
body {
background: green;
}
}
最小寬度為768畫素的螢幕
當螢幕尺寸大於768畫素但小於992畫素時，使用`background-color`屬性設定以下背景顏色：
@media only screen and (min-width: 768px) {
body {
background: orange;
}
}
最大寬度為992畫素的螢幕
當螢幕尺寸大於992畫素但小於1200畫素時，使用`background-color`屬性設定以下背景顏色：
@media only screen and (min-width: 992px) {
body {
background: red;
}
}
最大寬度為1200畫素的螢幕
當螢幕尺寸大於1200畫素時，使用`background-color`屬性設定以下背景顏色：
@media only screen and (min-width: 1200px) {
body {
background: cyan;
}
}
示例
要使用CSS中的媒體查詢實現常見的裝置斷點，程式碼如下：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: white;
}
@media only screen and (max-width: 600px) {
body {
background: blue;
}
}
@media only screen and (min-width: 600px) {
body {
background: green;
}
}
@media only screen and (min-width: 768px) {
body {
background: orange;
}
}
@media only screen and (min-width: 992px) {
body {
background: red;
}
}
@media only screen and (min-width: 1200px) {
body {
background: cyan;
}
}
</style>
</head>
<body>
<h1>Typical Breakpoints Example</h1>
<h2>Resize the screen to see background color change on different breakpoints</h2>
</body>
</html>
更新於：2023-12-21
瀏覽量：103
廣告