Html 简明教程
HTML - Responsive Web Design
自适应网页设计全都是关于设计在所有终端用户设备中都美观的网页，如手机、平板电脑和台式机。它会根据用户设备自动调整大小和其他功能。
A Responsive Web design all about designing a webpage that looks good in all the end user devices like phones, tablets and desktops. It will automatically adjust size and other features accordance with user device.
自适应网页有助于改善网站的用户体验、可访问性和性能。
Responsive Webpages help in improving the user experience, accessibility and performance of a website.
How to make Responsive Webpages?
我们可以通过多种方式使我们的网页自适应。一种通用做法是利用内置的 CSS 或引导框架，这些框架提供了预先设计的组件和网格系统。下面是如何确保网页自适应的一些一般步骤。
There are several ways by which we can make our webpage responsive. A general practice is to make use of inbuilt CSS or bootstrap frameworks that provide pre-designed components and grid systems. Here are some general steps to ensure responsiveness of a webpage.
-
Use Responsive Grid Layouts Always design your layout with a flexible grid structure, so when the size of screen increases grid will extend accordingly.
-
Flexible Images and Media Ensure that the images in webpage as properly scaled within their containers. You can use CSS properties like "max-width: 100%;" and "height: auto;".
-
Use Media Query You can use CSS media queries to apply different styles for different screen sizes. This allows you to adjust the layout, font sizes, and other design elements based on the device’s width. You can know about media query here.
-
Include Meta Tag with viewport The viewport meta tag inside HTML head to ensures proper scaling and rendering on mobile devices.
-
Use Relative Units Use relative units like em, rem, or percentages for font sizes, padding, and margins to ensure that text scales appropriately.
Setting Viewport for Responsive Design
视口表示用户设备的可视区域。视口之外的内容可以在滚动时看到。通过控制页面的宽度和比例，它有助于网页在不同的设备上很好地呈现。
The viewport represents the visible area of user’s device. The content that is outside of the viewport can be seen if scrolled. It helps web pages’ render well on different devices by controlling the width and scale of the page.
<meta name="viewport" content="width=device-width, initial-scale=1.0">上述标签告诉浏览器将页面宽度与屏幕宽度匹配，并在用户首次加载页面时设置初始缩放级别。
The above tag tells the browser to match the page width to the screen’s width and set the initial zoom level when the page is first loaded by the user.
我们可以调整视口的设置，包括宽度、初始比例、最大比例、最小比例和用户可缩放。这些调整可以使我们的网站更易于访问和用户友好。
We can adjust viewport settings for width, initial-scale, maximum-scale, minimum-scale, and user-scalable. These adjustments can make our website more accessible and user-friendly.
HTML <meta> viewport tag Attributes
<meta> 视口标签的以下属性用于响应式设计：
The following attributes of <meta> viewport tag are used for responsiveness:
Attribute |
Description |
width |
It controls the width of the virtual viewport. |
height |
It controls the height of the virtual viewport. |
initial-scale |
It specifies the initial zoom level of the viewport when a web page is first loaded. |
minimum-scale |
It specifies the minimum zoom level to which the user can zoom the page. |
maximum-scale |
It defines the maximum zoom level to which the user can zoom the page. |
user-scalable |
It specifies whether the user can zoom in or out. |
interactive-widget |
It defines how the interactive UI widgets affect the viewport. |
Examples of Responsive Webpages
下面是一些使用HTML和CSS设计响应式网页的示例。查看以下示例以消除您对响应式网页设计的概念。
Here are some examples of responsive webpage designing using HTML and CSS. Checkout the below examples to clear your concept on responsive web design.
Setting Viewport for Webpage
以下示例说明如何使用<meta>视口标签使网页响应式。
The following example illustrates how to use the <meta> viewport tag to make a web page responsive.
<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的相对长度单位。
In HTML, to make a responsive text that adjusts its font size automatically based on the viewport, we need to use the font-size property of CSS along with "vw" length unit. The vw is an abbreviation that stands for view width or viewport width which is a relative length unit of CSS.
相对长度单位总是根据另一个元素的尺寸来计算。请注意， 1vw 等于视口宽度的1％。
The relative length units are always calculated with respect to another element’s size. Note that 1vw is equal to 1% of the width of viewport.
在此示例中，我们正在使用“vw”长度单位来使文本具有响应性。
In this example, we are using the "vw" length unit to make the text responsive.
<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属性确保图像不会缩放到大于其原始大小。
In HTML, we can create images that are responsive, meaning they can adjust their size to fit the viewport. To do so, we can either set the image’s width property to 100% or max-width property to 100%. The width property can scale the image larger than its original size, on the other hand, the max-width property ensures the image does not scale beyond its original size.
以下示例显示了如何创建响应式图像。对于第一张图片，我们使用 width 属性，而对于第二张图片，我们使用 max-width 属性。
The following example shows how to create responsive images. For the first image, we are using the width property and for the second one max-width property.
<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 元素样式。以下是常见的断点：
The CSS media query serves as a filter that enables us to style the web page selectively for different devices. A single web page can have multiple media queries, each for a specific screen size. To define these screen sizes, we use the media query breakpoints and style the HTML elements accordingly. Here are the common breakpoints:
-
Mobile: 360 x 640 px
-
Tablet: 768 x 1024 px
-
Laptop: 1366 x 768 px
-
HDdesktop: 1920 x 1080 px
下面的 HTML 代码展示了在设计响应式布局时使用媒体查询。
The following HTML code demonstrates the use of media queries in designing a responsive layout.
<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 像素时，侧边栏将保持在顶部。
The below example will make a responsive webpage using flexbox layout. The sidebar will remain on top for devices with screen width less than 768 pixels.
<!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>