Html 简明教程
HTML - Responsive Web Design
自适应网页设计全都是关于设计在所有终端用户设备中都美观的网页，如手机、平板电脑和台式机。它会根据用户设备自动调整大小和其他功能。
自适应网页有助于改善网站的用户体验、可访问性和性能。
How to make Responsive Webpages?
我们可以通过多种方式使我们的网页自适应。一种通用做法是利用内置的 CSS 或引导框架，这些框架提供了预先设计的组件和网格系统。下面是如何确保网页自适应的一些一般步骤。
-
Use Responsive Grid Layouts 始终使用灵活网格结构设计布局，这样当屏幕尺寸增加时，网格也会相应地扩展。
-
Flexible Images and Media 确保网页中的图像在它们的容器内正确缩放。您可以使用 CSS 属性，如 "max-width: 100%;" 和 "height: auto;" 。
-
Use Media Query 您可以使用 CSS 媒体查询对不同的屏幕尺寸应用不同的样式。这可以让您根据设备的宽度调整布局、字体大小和其他设计元素。您可以了解媒体查询 here.
-
Include Meta Tag with viewport 在 HTML 头部里面，视口元标签会确保在移动设备上能够正确缩放和渲染。
-
Use Relative Units 使用em、rem或百分比等相对单位作为字体大小、填充和边距，以确保文本按比例缩放。
Setting Viewport for Responsive Design
视口表示用户设备的可视区域。视口之外的内容可以在滚动时看到。通过控制页面的宽度和比例，它有助于网页在不同的设备上很好地呈现。
<meta name="viewport" content="width=device-width, initial-scale=1.0">上述标签告诉浏览器将页面宽度与屏幕宽度匹配，并在用户首次加载页面时设置初始缩放级别。
我们可以调整视口的设置，包括宽度、初始比例、最大比例、最小比例和用户可缩放。这些调整可以使我们的网站更易于访问和用户友好。
HTML <meta> viewport tag Attributes
<meta> 视口标签的以下属性用于响应式设计：
Attribute |
Description |
width |
它控制虚拟视口的宽度。 |
height |
它控制虚拟视口的高度。 |
initial-scale |
它指定网页首次加载时视口的初始缩放级别。 |
minimum-scale |
它指定用户可以将页面缩放到其最小缩放级别。 |
maximum-scale |
它定义用户可以将页面缩放到其最大缩放级别。 |
user-scalable |
它指定用户是否可以放大或缩小。 |
interactive-widget |
它定义交互式UI工具小部件如何影响视口。 |
Examples of Responsive Webpages
下面是一些使用HTML和CSS设计响应式网页的示例。查看以下示例以消除您对响应式网页设计的概念。
Setting Viewport for Webpage
以下示例说明如何使用<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>Creating Responsive Text
在HTML中，为了使 responsive text 能根据视口自动调整其字体大小，我们需要使用CSS的 * font-size* 属性和 "vw" 长度单位。 vw 是一个缩写，代表 view width 或 viewport width ，它是一个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>Creating Responsive Images
在HTML中，我们可以创建响应式图像，这意味着它们可以调整其大小以适应视口。为此，我们可以将图像的 width 属性设置为100％或 * max-width* 属性设置为100％。宽度属性可以将图像缩放到大于其原始大小，另一方面，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>Responsive design using Media Queries
CSS * media query* 用作一个筛选器，使我们能够针对不同的设备有选择地对网页进行样式化。单个网页可以有多个媒体查询，每个媒体查询针对特定屏幕尺寸。要定义这些屏幕尺寸，我们使用媒体查询断点并相应地设置 HTML 元素样式。以下是常见的断点：
-
手机：360 x 640 px
-
平板电脑：768 x 1024 px
-
笔记本电脑：1366 x 768 px
-
高清台式机：1920 x 1080 px
下面的 HTML 代码展示了在设计响应式布局时使用媒体查询。
<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>Responsive Flexbox Layout
下面的示例将使用 * flexbox layout.* 制作一个响应式网页。当屏幕宽度小于 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>