1、媒体查询（Media Queries）
在HTML和CSS中，媒体查询（Media Queries）是一种非常有用的技术，它允许创建者根据不同的设备特征（如屏幕尺寸、分辨率和设备类型等）来应用不同的样式规则。这是响应式网页设计的核心工具，确保网页在各种设备上都能良好显示。 通过使用媒体查询，可以确保网站的布局、字体大小、颜色等在不同的设备和情境下都能提供最佳的用户体验。
@media not|only mediatype and (expressions) {
/* CSS 规则 */
}说明：
mediatype 可以是 all、print、screen 等。
expressions 检查特定的媒体特性，如宽度、高度等。
1）根据设备宽度调整样式
适应手机、平板和桌面的常见断点，如下，
/* 手机设备 */
@media (max-width: 600px) {
.container {
padding: 10px;
}
}
/* 平板设备 */
@media (min-width: 601px) and (max-width: 1024px) {
.container {
padding: 20px;
}
}
/* 桌面设备 */
@media (min-width: 1025px) {
.container {
padding: 30px;
}
}
2）打印样式
当内容需要打印时，可以设置不同的样式以优化打印效果。
@media print {
body {
font-size: 12pt;
}
.navbar, .footer {
display: none;
}
}
3）横竖屏响应
根据设备横竖屏自动调整内容布局。
/* 竖屏 */
@media (orientation: portrait) {
.container {
margin: 20px;
}
}
/* 横屏 */
@media (orientation: landscape) {
.container {
margin: 10px;
}
}
2、弹性盒子模型（Flexbox）
Flexbox是一个强大的布局工具，它提供了一种更加高效的方式来排列、对齐和分配容器内的项空间，即使它们的大小未知或是动态变化的。它特别适合于响应式设计。通过以一种预测的方式来排列元素，即使这些元素的大小未知或是动态变化的。Flexbox 布局主要依赖于 flex 容器和子元素。
1）容器属性
属性 | 描述 |
display: flex; | 定义 .container 为弹性容器。 |
flex-direction: row; | 子元素沿水平轴排列。 |
flex-wrap: wrap; | 当子元素的总宽度超过容器的宽度时， 它们会换到新行。 |
justify-content: space-around; | 子元素在主轴（水平方向） 上均匀分布，包括两端。 |
align-items: center; | 子元素在交叉轴（垂直方向）上居中对齐。 |
align-content: space-between; | 如果有多行， 这些行在容器中垂直方向上均匀分布。 |
Flexbox 容器使用以下属性来定义其布局行为：
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
<style>
.container {
display: flex; /* 定义为弹性容器 */
flex-direction: row; /* 主轴方向为水平 */
flex-wrap: wrap; /* 子元素超出容器宽度时换行 */
justify-content: space-around; /* 主轴上的对齐方式为均匀分布，两端也有间隔 */
align-items: center; /* 交叉轴上的对齐方式为居中 */
align-content: space-between; /* 多行之间均匀分布空间 */
padding: 10px;
border: 1px solid #ccc;
}
.item {
width: 150px;
height: 100px;
margin: 5px;
background-color: lightblue;
text-align: center;
line-height: 100px; /* 使文字垂直居中 */
border: 1px solid #000;
}
</style>
2）子元素属性
属性与值 | 说明 |
flex-grow: 1 | 允许子元素 根据需要扩展来占据任何额外的空间。 这里的 1 表示所有具有此属性的子元素 将平均分配额外空间。 |
flex-shrink: 1 | 允许子元素在空间不足时收缩。 数值1 表示在需要缩小空间时， 元素将按比例缩小。 |
flex-basis: 100px | 设置子元素在分配剩余空间 前的基础尺寸是100像素。 |
flex: 1 1 100px | 这是一个简写属性，同时设置了 flex-grow, flex-shrink, 和flex-basis。 其起始基础尺寸为100 像素。 |
align-self: center | 允许单个子元素相对于其它兄弟元素 有不同的对齐方式。 设为center表示在交叉轴上居中对齐， 可以覆盖由父容器设置的align-items属性。 |
Flexbox 子元素使用以下属性来控制其布局行为：
.item {
flex-grow: 1; /* 控制子元素扩张填满剩余空间，这里设为 1 表示允许扩张 */
flex-shrink: 1; /* 控制子元素在必要时如何收缩，这里设为 1 表示可以根据需要收缩 */
flex-basis: 100px; /* 设置子元素在分配多余空间前的默认尺寸为 100px */
flex: 1 1 100px; /* 使用 flex 简写属性，相当于上述三个属性的结合 */
align-self: center; /* 允许单个项目在交叉轴上自我对齐为居中 */
}3）实际应用示例
创建一个响应式的导航条，其中的链接元素在大屏幕上水平分布，在小屏幕上则堆叠显示。
<div class="nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
<style>
.nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.nav a {
flex: 1 1 auto;
margin: 5px;
text-align: center;
}
</style>3、网格布局（Grid Layout）
HTML中的网格布局（Grid Layout）是一个非常强大的布局系统，可以通过二维方式来排列网页元素。通过使用CSS Grid，可以创建复杂的设计，而无需使用额外的框架或工具。CSS网格布局提供了一种在两个维度上对容器中的元素进行布局的方法。它非常适合复杂布局的设计，可以很容易地实现响应式设计。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>网格布局示例</title>
<style>/* 定义容器为网格，并设置行和列 */
.container {
display: grid;
grid-template-columns: 1fr 2fr; /* 两列，第二列是第一列的两倍宽 */
grid-template-rows: 100px auto 200px; /* 三行，具体高度 */
grid-gap: 10px; /* 网格间隙 */
grid-template-areas: /* 命名网格区域 */
"header header"
"main sidebar"
"footer footer";
}
header {
grid-area: header; /* 指定区域为header */
background-color: lightblue;
}
article {
grid-area: main; /* 指定区域为main */
background-color: lightgreen;
}
aside {
grid-area: sidebar; /* 指定区域为sidebar */
background-color: lightyellow;
}
footer {
grid-area: footer; /* 指定区域为footer */
background-color: lightcoral;
}
/* 响应式布局 */
@media (max-width: 600px) {
.container {
grid-template-columns: 1fr; /* 单列布局 */
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}
</style>
</head>
<body>
<div class="container">
<header>Header</header>
<article>Main Content</article>
<aside>Sidebar</aside>
<footer>Footer</footer>
</div>
</body>
</html>4、 图片和视频的响应式处理
1）使用CSS媒体查询
通过CSS媒体查询，你可以为不同的屏幕尺寸指定不同的样式。这对于响应式图片和视频尤其重要。
/* 适用于屏幕宽度小于600px的设备 */
@media (max-width: 600px) {
img, video {
width: 100%;
height: auto;
}
}
2.）HTML5 元素
元素允许你根据设备的屏幕尺寸和分辨率来定义多源图片。浏览器会选择最适合当前屏幕的图片加载。
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 450px)" srcset="medium.jpg">
<img src="small.jpg" alt="示例图片">
</picture>
3.）使用srcset和sizes属性
srcset属性在标签中使用，可以指定一组图片的来源，浏览器会根据屏幕尺寸选择合适的图片。sizes属性用来指示浏览器在不同的屏幕尺寸下应该如何调整图片大小。
<img src="small.jpg" alt="示例图片"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w"
sizes="(max-width: 600px) 500px, (max-width: 1200px) 1000px, 2000px">
4） 响应式视频嵌入
对于视频，特别是嵌入式视频如YouTube视频，使用CSS来确保视频容器适应不同的屏幕尺寸。
<style>
.responsive-video {
position: relative;
padding-bottom: 56.25%; /* 16:9 比例 */
padding-top: 25px;
height: 0;
}
.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="responsive-video">
<iframe src="https://www.baidu.com/embed/example" frameborder="0" allowfullscreen></iframe>
</div>
5、 使用Viewport元标签
Viewport 元标签是 HTML 中用于控制视口（即用户设备上用于查看网页的区域）的设置的一种方式。这个标签对于响应式设计尤其重要，因为它能够调整网站在不同设备上的显示方式，包括桌面、平板和手机等。使用 Viewport 元标签可以优化用户的浏览体验，使网站在各种屏幕尺寸和分辨率上都表现良好。
属性名称 | 说明 |
width=device-width | 这个属性设置布局视口的宽度等于设备的物理宽度。 这意味着网页的宽度会根据设备的屏幕宽度自动调整。 |
initial-scale=1.0 | 这个属性设置页面的初始缩放比例为 这意味着网页将以其原始大小显示， 而不会进行缩放。 |
minimum-scale | 这个属性用于定义用户可以对页面进行的最小缩放比例。例如，
允许用户将页面缩小到最初大小的一半。 |
maximum-scale | 这个属性用于定义用户可以对页面进行的最大缩放比例。例如，
允许用户将页面放大到最初大小的两倍。 |
user-scalable | 这个属性可以设置为
用来控制用户是否可以手动缩放页面。 如果设置为 |
使用示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Responsive Web Design Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimum-scale=0.5, maximum-scale=2.0">
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这个页面展示了如何使用Viewport元标签来优化不同设备上的显示效果。</p>
</body>
</html>