HTML5響應式使用css媒體查詢

HTML 負責搭建頁面結構，CSS 負責樣式設計，并且通過媒體查詢實現了較好的響應式效果，能夠適應不同屏幕尺寸下面就是寫了一個詳細的實例。

CSS 部分

* {margin: 0;padding: 0;box-sizing: border-box;
}

*?是通配選擇器，會選中頁面上的所有元素。
margin: 0;?將所有元素的外邊距設置為 0。
padding: 0;?將所有元素的內邊距設置為 0。
box-sizing: border-box;?改變元素寬度和高度的計算方式，使元素的寬度和高度包含內邊距和邊框，但不包含外邊距。

body {font-family: Arial, sans-serif;line-height: 1.6;
}

font-family: Arial, sans-serif;?設置頁面主體文字的字體為 Arial，如果 Arial 不可用，則使用系統默認的無襯線字體。
line-height: 1.6;?設置行高為字體大小的 1.6 倍，讓文字在垂直方向上有合適的間距。

header {background-color: #333;color: white;padding: 1rem;
}

background-color: #333;?設置?header?元素的背景顏色為深灰色。
color: white;?設置?header?內文字的顏色為白色。
padding: 1rem;?給?header?元素添加 1 個根元素字體大小的內邊距。

nav {display: flex;justify-content: space-between;align-items: center;max-width: 1200px;margin: 0 auto;
}

display: flex;?將?nav?元素設置為彈性布局容器。
justify-content: space-between;?在水平方向上，將子元素均勻分布，兩端對齊。
align-items: center;?在垂直方向上，將子元素居中對齊。
max-width: 1200px;?設置?nav?元素的最大寬度為 1200 像素。
margin: 0 auto;?讓?nav?元素在水平方向上居中顯示。

nav ul {display: flex;list-style: none;
}

display: flex;?將?nav?內的無序列表設置為彈性布局容器。
list-style: none;?去除無序列表的默認列表項標記。

nav ul li {margin-left: 2rem;
}

margin-left: 2rem;?給?nav?內無序列表的每個列表項添加 2 個根元素字體大小的左外邊距。

nav a {color: white;text-decoration: none;
}

color: white;?設置?nav?內鏈接文字的顏色為白色。
text-decoration: none;?去除鏈接的下劃線。

.portfolio {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 2rem;padding: 2rem;max-width: 1200px;margin: 0 auto;
}

display: grid;?將?.portfolio?元素設置為網格布局容器。
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));?定義網格列的布局，會根據容器寬度自動適應列數，每列最小寬度為 300 像素，最大寬度平均分配剩余空間。
gap: 2rem;?設置網格項之間的間距為 2 個根元素字體大小。
padding: 2rem;?給?.portfolio?元素添加 2 個根元素字體大小的內邊距。
max-width: 1200px;?設置?.portfolio?元素的最大寬度為 1200 像素。
margin: 0 auto;?讓?.portfolio?元素在水平方向上居中顯示。

.card {background: #f4f4f4;padding: 1rem;border-radius: 8px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

background: #f4f4f4;?設置?.card?元素的背景顏色為淺灰色。
padding: 1rem;?給?.card?元素添加 1 個根元素字體大小的內邊距。
border-radius: 8px;?給?.card?元素添加 8 像素的圓角。
box-shadow: 0 2px 5px rgba(0,0,0,0.1);?給?.card?元素添加一個輕微的陰影效果。

.card img {width: 100%;height: auto;border-radius: 4px;
}

width: 100%;?設置?.card?內圖片的寬度為父元素寬度的 100%。
height: auto;?讓圖片的高度根據寬度自動調整，保持圖片的原始比例。
border-radius: 4px;?給?.card?內圖片添加 4 像素的圓角。

.card h3 {margin: 1rem 0;
}

margin: 1rem 0;?給?.card?內的?h3?標題添加上下 1 個根元素字體大小的外邊距。

footer {background: #333;color: white;text-align: center;padding: 1rem;position: fixed;bottom: 0;width: 100%;
}

background: #333;?設置?footer?元素的背景顏色為深灰色。
color: white;?設置?footer?內文字的顏色為白色。
text-align: center;?讓?footer?內的文字居中顯示。
padding: 1rem;?給?footer?元素添加 1 個根元素字體大小的內邊距。
position: fixed;?將?footer?元素固定在頁面上。
bottom: 0;?讓?footer?元素位于頁面底部。
width: 100%;?設置?footer?元素的寬度為 100%。

/* 響應式設計 */
@media (max-width: 768px) {nav {flex-direction: column;text-align: center;}nav ul {margin-top: 1rem;flex-direction: column;}nav ul li {margin: 0.5rem 0;}.portfolio {grid-template-columns: 1fr;padding: 1rem;}
}

@media (max-width: 768px)?是媒體查詢，當屏幕寬度小于等于 768 像素時，應用以下樣式。
flex-direction: column;?將?nav?元素和?nav?內的無序列表的彈性布局方向改為垂直方向。
text-align: center;?讓?nav?內的文字居中顯示。
margin-top: 1rem;?給?nav?內的無序列表添加 1 個根元素字體大小的上外邊距。
margin: 0.5rem 0;?給?nav?內無序列表的每個列表項添加上下 0.5 個根元素字體大小的外邊距。
grid-template-columns: 1fr;?將?.portfolio?元素的網格布局改為單列。
padding: 1rem;?給?.portfolio?元素添加 1 個根元素字體大小的內邊距。

HTML 部分

<!DOCTYPE html>
<html lang="zh-CN">

<!DOCTYPE html>?聲明文檔類型為 HTML5。
<html lang="zh-CN">?定義 HTML 文檔的根元素，并設置語言為中文（中國大陸）。

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>響應式作品集</title><link rel="stylesheet" href="style.css">
</head>

<meta charset="UTF-8">?設置文檔的字符編碼為 UTF-8。
<meta name="viewport" content="width=device-width, initial-scale=1.0">?配置視口，讓頁面寬度與設備寬度相同，初始縮放比例為 1.0。
<title>響應式作品集</title>?設置頁面的標題為 “響應式作品集”。
<link rel="stylesheet" href="style.css">?引入外部樣式表?style.css。

<body><header><nav><h1>我的作品集</h1><ul><li><a href="#home">首頁</a></li><li><a href="#works">作品</a></li><li><a href="#about">關于</a></li></ul></nav></header>

<header>?定義頁面的頁眉部分。
<nav>?定義導航欄。
<h1>我的作品集</h1>?顯示網站標題。
<ul>?定義無序列表。
<li>?定義列表項。
<a href="#home">首頁</a>?定義鏈接，點擊后跳轉到頁面內 ID 為?home?的元素位置（這里代碼中未給出?home?元素）。

    <main><section id="works" class="portfolio"><div class="card"><img src="https://via.placeholder.com/300" alt="作品1"><h3>作品標題1</h3><p>作品描述內容</p></div><div class="card"><img src="https://via.placeholder.com/300" alt="作品2"><h3>作品標題2</h3><p>作品描述內容</p></div><div class="card"><img src="https://via.placeholder.com/300" alt="作品3"><h3>作品標題3</h3><p>作品描述內容</p></div></section></main>

<main>?定義頁面的主要內容區域。
<section id="works" class="portfolio">?定義一個章節，ID 為?works，類名為?portfolio。
<div class="card">?定義一個卡片容器。
<img src="https://via.placeholder.com/300" alt="作品1">?顯示一張占位圖片，alt?屬性為圖片的替代文本。
<h3>作品標題1</h3>?顯示作品標題。
<p>作品描述內容</p>?顯示作品描述。

    <footer><p>&copy;  All rights reserved.</p></footer>
</body>
</html>

<footer>?定義頁面的頁腳部分。

你盡管努力，剩下交給天意。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/72914.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/72914.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/72914.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！