資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
Microsoft Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用 CSS 媒體查詢實現響應式網頁設計
媒體查詢是一種 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>
混合列布局與響應式設計
讓我們來看另一個例子，我們將建立一個混合列布局，並使用媒體查詢概念設定響應式設計。
更改佈局
當螢幕尺寸小於 900 畫素時，寬度設定為 50%：
@media screen and (max-width: 900px) {
.col {
width: 50%;
}
}
當螢幕尺寸小於 600 畫素時，寬度設定為 100%：
@media screen and (max-width: 600px) {
.col {
width: 100%;
}
}
示例
要使用 CSS 建立混合列布局網格，程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
}
.col {
color: white;
float: left;
width: 25%;
padding: 10px;
}
.colContainer:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 900px) {
.col {
width: 50%;
}
}
@media screen and (max-width: 600px) {
.col {
width: 100%;
}
}
</style>
</head>
<body>
<h1>Mixed col Layout Example</h1>
<h2>Resize the screen to see the below divs resize themselves</h2>
<div class="colContainer">
<div class="col" style="background-color:rgb(153, 29, 224);">
<h2>First col</h2>
</div>
<div class="col" style="background-color:rgb(12, 126, 120);">
<h2>Second col</h2>
</div>
<div class="col" style="background-color:rgb(207, 41, 91);">
<h2>Third col</h2>
</div>
<div class="col" style="background-color:rgb(204, 91, 39);">
<h2>Fourth col</h2>
</div>
</div>
</body>
</html>
設定響應式導航選單
在這個例子中，我們將建立一個響應式導航選單，併為選單設定圖示。當螢幕尺寸降到 830 畫素以下時，將顯示移動檢視：
@media screen and (max-width: 830px) {
.links {
display: block;
}
示例
這是一個例子：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous" />
<style>
body {
margin: 0px;
margin-top: 10px;
padding: 0px;
}
nav {
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(100, 100, 100);
}
input[type="text"] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 8px;
font-size: 17px;
}
.selected {
background-color: rgb(0, 18, 43);
}
@media screen and (max-width: 830px) {
.links {
display: block;
}
input[type="text"] {
display: block;
width: 100%;
margin: 0px;
border-bottom: 2px solid rgb(178, 137, 253);
text-align: center;
}
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#">
<i class="fa fa-fw fa-home"></i> Home
</a>
<a class="links" href="#">
<i class="fa fa-fw fa-user"></i> Login
</a>
<a class="links" href="#">
<i class="fa fa-user-circle-o" aria-hidden="true"></i> Register
</a>
<a class="links" href="#">
<i class="fa fa-fw fa-envelope"></i> Contact Us
</a>
<a class="links" href="#">
<i class="fa fa-info-circle" aria-hidden="true"></i> More Info
</a>
<input type="text" placeholder="Search Here.." />
</nav>
</body>
</html>
更新於：2023-12-26
瀏覽量：586
廣告