HTML - 响应式网页设计

响应式网页设计，旨在设计一个在所有最终用户设备（如手机、平板电脑和台式机）中看起来不错的网页。它将根据用户设备自动调整尺寸和其他功能。

响应式网页有助于改善网站的用户体验、可访问性和性能。

如何制作响应式网页？

有几种方法可以使我们的网页具有响应性。一般的做法是使用内置的 CSS 或引导框架，这些框架提供预先设计的组件和网格系统。以下是一些确保网页响应能力的一般步骤。

使用响应式网格布局：始终使用灵活的网格结构设计布局，因此当屏幕大小增加时，网格将相应扩展。
灵活的图像和媒体：确保网页中的图像在其容器中正确缩放。您可以使用 CSS 属性，例如“max-width： 100%;”和“height： auto;”。使
用media查询：您可以使用 CSS 媒体查询为不同的屏幕尺寸应用不同的样式。这允许您根据设备的宽度调整布局、字体大小和其他设计元素。
包含带可视区域：定义HTML 头部可视标签，以确保在移动设备上正确缩放和呈现。
使用相对单位：使用相对单位（如 em、rem 或百分比）来表示字体大小、填充和边距，以确保文本适当缩放。

设置响应式设计的

可视区域表示用户设备的可见区域。如果滚动，可以看到可视区域之外的内容。它通过控制页面的宽度和比例来帮助网页在不同设备上很好地呈现。

要控制可视区域，请在 <head> 部分添加以下 <meta> 标签：


 <meta name="viewport" content="width=device-width, initial-scale=1.0">

上面的标签告诉浏览器将页面宽度与屏幕宽度相匹配，并在用户首次加载页面时设置初始缩放级别。

我们可以调整宽度、初始比例、最大比例、最小比例和用户可缩放的可视区域设置。这些调整可以使我们的网站更易于访问和用户友好。

HTML <meta> 标签属性

<meta> 标签的以下属性用于响应性：

属性	描述
width	定义虚拟视口的宽度。
height	定义虚拟视口的高度。
initial-scale	定义首次加载网页时视口的初始缩放级别。
minimum-scale	定义用户可以缩放页面的最小缩放级别。
maximum-scale	定义用户可以缩放页面的最大缩放级别。
user-scalable	定义用户是否可以放大或缩小。
interactive-widget	定义交互式 UI 小组件如何影响视口。

响应式网页示例

以下是一些使用 HTML 和 CSS 的响应式网页设计示例。查看以下示例，以清除您对响应式网页设计的概念。

设置网页的<meta>

以下示例说明如何使用 <meta> 标签使网页具有响应性。


<html>
<head>
	 <meta name="viewport" content="width=device-width, initial-scale=1.0">
	 <style>
			.container {
				 background-color: #f1f1f1;
				 display: flex;
				 flex-direction: row;
			}
			.col {
				 width: 47%;
				 margin: auto 1%;
				 background-color: #4CAF50;
				 color: white;
				 text-align: center;
				 line-height: 100px;
				 font-size: 10px;
			}
	 </style>
</head>
<body>
	 <h2>
			Setting up dimensions in percentage 
			for the HTML element 
	 </h2>
	 <div class="container">
			<div class="col"> Column 1 </div>
			<div class="col"> Column 2 </div>
	 </div>
</body>
</html>

创建响应式文本

在 HTML 中，要制作一个根据视口自动调整其字体大小的响应式文本，我们需要使用 CSS 的 font-size 属性以及“vw”长度单位。vw 是视图宽度或视口宽度的缩写，是 CSS 的相对长度单位。

相对长度单位始终相对于另一个元素的大小进行计算。请注意，1vw 等于视口宽度的 1%。

在此示例中，我们使用“vw”长度单位来使文本具有响应性。


<html>
<head>
	 <meta name="viewport" 
				 content="width=device-width, initial-scale=1.0">
</head>
<body>
	 <h1 style="font-size:6vw;">
			Example of Responsive Typography
	 </h1>
	 <h2 style="font-size:5vw;">
			Responsive text by Using the vw length unit.
	 </h2>
	 <p style="font-size:3vw;"> 
			The text will adapt the font size according 
			to the device's width. 
	 </p>
</body>
</html>

创建响应式图像

在 HTML 中，我们可以创建响应式图像，这意味着它们可以调整大小以适应视口。为此，我们可以将图像的 width 属性设置为 100% 或将 max-width 属性设置为 100%。width 属性可以缩放图像大于其原始大小，另一方面，max-width 属性可确保图像不会缩放超过其原始大小。

以下示例演示如何创建响应式图像。对于第一张图像，我们使用 width 属性，对于第二张图像，我们使用 max-width 属性。


<html>
<head>
	 <meta name="viewport" 
				 content="width=device-width, initial-scale=1.0">
</head>
<body>
	 <h2>
			Setting the width property to 100% 
	 </h2>
	 <img src="/images/logo.png" 
				alt="logo" 
				style="width:100%; ">
	 <h2> 
			Creating the responsive image by 
			setting the max-width property to 
			100% 
	 </h2>
	 <img src="/images/logo.png" 
				alt="logo" 
				style="max-width:100%; height:auto; ">
</body>
</html>

使用media查询的响应式设计

CSS media 查询充当过滤器，使我们能够有选择地为不同的设备设置网页样式。单个网页可以有多个媒体查询，每个媒体查询针对特定的屏幕尺寸。为了定义这些屏幕大小，我们使用媒体查询断点并相应地设置 HTML 元素的样式。以下是常见的断点：

手机：360 x 640 像素
平板电脑：768 x 1024 像素
笔记本电脑：1366 x 768
像素 HD桌面：1920 x 1080 像素

以下 HTML 代码演示了在设计响应式布局时使用media查询。


<html>
<head>
	 <style>
			.main {
				 width: 50%;
				 height: 50vh;
				 display: flex;
				 align-items: center;
				 text-align: center;
				 margin: 10px auto;
				 flex-direction: column;
			}
			img {
				 width: 100%;
				 height: 100%;
			}
			.description {
				 width: 100%;
				 height: 100%;
				 font-size: 30px;
				 color: red;
				 margin-top: 20px;
			}
			/* using media query */
			@media screen and (max-width: 600px) {
				 .main {
						width: 100%;
						height: 100vh;
						margin: 5px auto;
				 }

				 .description {
						font-size: 20px;
						color: blue;
						margin-top: 10px;
				 }
			}
	 </style>
</head>
<body>
	 <div class="main">
			<img src="/images/logo.png" 
					 alt="logo" 
					 width="100" 
					 height="200">
			<div class="description"> 
				 The above is a logo of Tutorilaspoint. 
				 The logo is responsive, and it will be 
				 displayed in the centre of the screen. 
			</div>
	 </div>
</body>
</html>

响应式 Flexbox 布局

下面的示例将使用 flexbox 布局制作响应式网页。对于屏幕宽度小于 768 像素的设备，侧边栏将保留在顶部。


<!DOCTYPE html>
<html lang="en">
<head>
			<title>
				 Responsive Flexbox Layout
			</title>
	 <style>
			* {
						box-sizing: border-box;
						margin: 0;
						padding: 0;
			}

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

			.header, .footer {
						background-color: #333;
						color: white;
						text-align: center;
						padding: 1rem;
			}

			.container {
						display: flex;
						flex-wrap: wrap;
						min-height: 80vh;
			}

			.sidebar {
						background: #f4f4f4;
						flex: 1;
						min-width: 200px;
						padding: 1rem;
			}

			.main-content {
						background: #fff;
						flex: 3;
						padding: 1rem;
						min-width: 300px;
			}

			.footer {
						margin-top: auto;
			}

			@media (max-width: 768px) {
						.container {
							 flex-direction: column;
						}
			}

	 </style>
</head>

<body>
			<header class="header">
				 <h1>Header</h1>
			</header>

			<div class="container">
				 <aside class="sidebar">
						<h2>Sidebar</h2>
						<p>Sidebar content goes here.</p>
				 </aside>

				 <main class="main-content">
						<h2>Main Content</h2>
						<p>Main content goes here.</p>
						<p>
							 Resize output window to see 
							 responsiveness.
						</p>
				 </main>
			</div>

			<footer class="footer">
				 <p>Footer</p>
			</footer>
</body>
</html>

打印本页