HTML 响应式

HTML 中的响应式设计是根据每种屏幕尺寸的设备尺寸来适应 HTML 元素的概念。这些元素在移动设备、台式机或平板电脑等每种设备上都应该看起来很完美。响应式设计是指元素根据显示视图中的可用空间快速调整。它基于视口宽度、文本大小、响应图像和其他元素等。如今，响应式设计术语涉及许多新技术，以完美适应不同浏览器和设备的设计。媒体查询是最好的部分之一，包括通过 CSS 进行响应式设计，它告诉浏览器根据用户的设备尺寸进行调整。

HTML 响应式设计中使用的语法

HTML 中的响应式设计取决于很多因素；让我们一一看看：

1。设置视口：下面的语法用于将视口设置为用户页面视图，这有助于浏览器控制网页的尺寸及其缩放。它会根据不同的设备尺寸自动调整元素并根据设备显示屏幕。

<meta initial-scale='1.0"'>

2。 响应式图像：每当向网页添加一些图像时，还需要在每个设备的屏幕尺寸上以适当的尺寸显示这些图像。

<div class="section content">  <img  class="example lazy" src="/static/imghwm/default1.png" data-src="images.jpg" alt="HTML 响应式" >
</div>

3。设置宽度属性：借助CSS，我们可以将宽度设置为100%，这样有助于使元素在屏幕显示视图中响应。

width: 100%;

4。使用最大宽度属性： 与宽度相同，可以将元素的最大宽度设置为 100 %，因此它将帮助我们以正确的响应格式显示所有 HTML 元素。

Max-width:100%;

5。响应式文本：与另一个元素相同，有必要使文本也根据屏幕尺寸在所有设备中负责。可以使用VW进行设置，这可以帮助用户设置视口宽度，以便根据设备屏幕轻松调整文本大小。此语法解释了视口被称为浏览器显示尺寸。这里 1 VW 等于实际视口宽度的 1%。

<h4 id="Text">Text</h4>

6。使用媒体 查询： 媒体查询在响应式设计中发挥着重要作用，可以使文本、图像和其他元素对不同浏览器尺寸的不同设备尺寸更具响应性。现在有不同的框架可以使我们的网页更具响应性。他们就像：

• 响应式样式表：这个框架帮助我们使用不同的样式表框架，例如 W3.CSS，它在创建响应式设计时发挥主要作用。默认情况下，它支持移动优先设计。它很容易学习和开发。
• Bootstrap：它是最流行的框架，正在快速增长并免费提供给用户。它比其他框架更加用户友好，因为它基于 HTML、CSS 和 jquery 等 Web 开发语言，这有助于使网页响应更快。
• 最新响应式CSS：支持各种浏览器以及智能手机、平板电脑、笔记本电脑等所有类型的设备

在 HTML 中实现响应式的示例

下面是 HTML 中响应式的示例。

示例#1

在此示例中，我们在 HTML 代码中设置视口，并使图像具有响应能力。

HTML 代码：

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

<h2 id="Responsive-Design-by-setting-Viewport">Responsive Design by setting Viewport</h2>
<p>Setting specific width to the screen which will adjust screen as per device on which we are going to display our webpage.</p>
<img  class="example lazy" src="/static/imghwm/default1.png" data-src="images.jpg" alt="HTML 响应式" >

在台式机或笔记本电脑屏幕上输出：

移动设备上的输出：

平板电脑上的输出：

示例#2

在示例 2 中，我们使用媒体查询使屏幕响应。这将帮助我们通过使用代码支持各种浏览器以及各种设备来使网页响应：

HTML 代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing:border-box;
}
.top {
background-color:#00ff00;
padding:20px;
float:left;
width:30%;
}
.middle {
background-color:#800000;
padding:20px;
float:left;
width:40%;
color:white;
}
.bottom {
background-color:#00ffff;
padding:20px;
float:right;
width:30%;
}
@media screen and (max-width:800px) {
.top, .middle, .bottom {
width:100%;
}
}
</style>


<h2 id="Responsive-Design-in-HTML-using-Media-Queries">Responsive Design in HTML using Media Queries</h2>
<p>We will see web page on different devices by resizing browser window</p>
<div class="top">
<h4 id="First-Content-Part">First Content Part</h4>
<img  src="/static/imghwm/default1.png" data-src="images.jpg" class="lazy" alt="HTML 响应式" >
</div>
<div class="middle">
<h4 id="Second-Content-Part">Second Content Part</h4>
<img  src="/static/imghwm/default1.png" data-src="images.jpg" class="lazy" alt="HTML 响应式" >
</div>
<div class="bottom">
<h4 id="Third-Content-part">Third Content part</h4>
<img  src="/static/imghwm/default1.png" data-src="images.jpg" class="lazy" alt="HTML 响应式" >
</div>

桌面视图上的输出：

移动设备上的输出：在移动设备中，输出屏幕将是可滚动的，因此要看到整个网页，我们必须在屏幕上向下滚动。

平板电脑设备上的输出：相同的输出将根据每个平板电脑设备尺寸进行调整。

示例 #3

让我们看另一个使用 bootstrap、标准 CSS 和媒体查询的示例 3：

HTML 代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.options {
float:left;
width:20%;
text-align:center;
}
.options a {
background-color:#e5e5e5;
padding:8px;
margin-top:7px;
display:block;
width:100%;
color:black;
}
.main {
float:left;
width:60%;
padding:0 20px;
}
.course {
background-color:#ff8000;
color:white;
float:left;
width:20%;
padding:10px;
text-align:center;
}
#header
{
background-color:#003333;
padding:10px;
text-align:center;
color:white;
}
#footer{
background-color:black;
text-align:center;
padding:10px;
margin-top:7px;
color:white;
@media only screen and (max-width:620px) {
/* For mobile phones: */
.options, .main, .course {
width:100%;
}
}
}
</style>


<div id="header">
<h1 id="Welcome-to-EDUCBA">Welcome to EDUCBA</h1>
</div>
<div style="overflow:auto">
<div class="options">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Career</a>
<a href="#">Contact us</a>
</div>
<div class="main">
<h2 id="WHO-IS-EDUCBA">WHO IS EDUCBA?</h2>
<p> Learn Graphic designing, Animation, Game Development, Video Editing & more with our Online Certification Courses</p>
</div>
<div class="course">
<h3 id="b-Courses-b"><b>Courses</b></h3>
<p>Data science</p>
<p>Marketing</p>
<p>Excel</p>
<p>Design</p>
</div>
</div>
<div id="footer">© 2019 - EDUCBA. ALL RIGHTS RESERVED</div>

Output on Laptop Screen:

Output on Mobile Devices:

Output on Tablet:

Conclusion

Responsive design is done by using HTML and CSS language to make web page more responsive and user-friendly, which display properly on each and every device size. It uses the latest framework like W3.CSS, bootstrap and some media queries code.

以上是HTML 响应式的详细内容。更多信息请关注PHP中文网其他相关文章！