极客笔记了解响应式网站的相关信息
什么是响应式网站
如果我们在任何设备上打开响应式网站，每个网页的内容都可以良好显示，不会溢出或被其他网页覆盖。例如，在任何尺寸的设备上打开TutorialsPoint.com网站，用户可以观察到网页的内容保持不变，但内容的替换方式会有所不同，以便内容可读。
因此，响应式网站的基本目标是使内容在每个设备上可见和时尚。
为什么我们需要响应式网站
现在，问题是为什么我们需要响应式网站。嗯，答案在这里。
在早期，用户只能从桌面访问网站，但现在，用户使用不同尺寸的设备访问网站，如移动设备和平板电脑。甚至大多数网站的访问者来自移动设备，而不是桌面设备。
如今，每个企业都在互联网上运营，并试图通过网站在线获取客户。如果任何用户从移动设备访问您的网站，而您的网站不是响应式的，用户会立即关闭您的网站并转到竞争对手的网站。
因此，响应式网站有助于获取更多的客户和访问者。
如何开始创建一个响应式网站
我们需要使用公共断点来确定浏览器的尺寸，并相应地为HTML元素添加样式。以下是常见的断点。
Mobile: 360 x 640 px
Tablet: 768 x 1024 px
Laptop: 1366 x 768 px
HDdesktop: 1920 x 1080 px
第一步，我们必须在<head>部分中添加meta标签.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
现在，我们的HTML内容将保持网页不变，但我们需要以一种可以在任何设备上轻松读取HTML内容的方式编写CSS.
示例1 (按百分比设置元素尺寸)
在下面的例子中，我们有一个包含两个col div元素的container div元素。我们已经用百分比设置了容器div元素的尺寸，用百分比设置了col div元素的尺寸。
在输出中，用户可以观察到它在任何维度的所有设备上都是可读的。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
width: 100%;
height: 100px;
background-color: #f1f1f1;
display: flex;
flex-direction: row;
}
.col {
width: 47%;
margin: auto 1%;
height: 100%;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 100px;
font-size: 10px;
}
</style>
</head>
<body>
<h2>Creating the responsive website by 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>
示例2 (使用媒体查询)
在下面的例子中，我们使用媒体查询来创建响应式网页设计。使用媒体查询，我们可以为网页添加断点，并为每个设备分别设置网页的样式。
在这里，用户可以看到我们为宽度小于600px的设备更改了main div的尺寸。此外，我们还使用媒体查询更改了移动设备的字体大小、字体颜色和外边距.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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;
}
/* writing the above css code for table and mobile devices 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>
<h2> Creating the responsive website by Using the media Queries in CSS </h2>
<div class = "main">
<img src = "https://yt3.googleusercontent.com/H_Xbai9qfD-0DWSLfOuwMa4dieJHcz-tJa18UaoUf6C7TerPWvcuhatFAudCfGVJ-dszbWDnhA=s900-c-k-c0x00ffffff-no-rj"
alt = "logo">
<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>
示例3 (使用Clamp函数)
在下面的例子中，我们使用clamp()函数使网页具有响应性。clamp()函数有三个参数，第一个是最小宽度，第二个是百分比，第三个是最大宽度。
在这里，我们将400px作为第一个参数，30%作为第二个参数，600px作为clamp()函数的第三个参数，这意味着在任何设备中，卡宽永远不会低于400px，也不会超过600px。如果屏幕宽度的30%在400px到600px之间，该值将设置为卡片的宽度。
在输出中，用户可以观察卡片在不同设备上是否有响应。
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<style>
.card {
height: 400px;
width: clamp(400px, 30%, 600px);
background-color: rgb(13, 247, 247);
padding: 5px;
border-radius: 12px;
border: 2px solid green;
}
img {
height: 90%;
width: 100%;
border-radius: 12px;
}
.content {
font-size: 20px;
font-weight: bold;
text-align: center;
padding: 10px;
color: green;
}
</style>
</head>
<body>
<h2> Creating the responsive website by Using the clamp() function in CSS </h2>
<div class = "card">
<img src = "https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg"
Alt = "tree image">
<div class = "content">
Save the Environment!
</div>
</div>
</body>
</html>
示例4 (介绍Flexbox)
在下面的例子中，我们引入了Flexbox来制作一个响应式网页。我们可以使用display flex将任何HTML元素显示为flexbox。之后，我们可以使用各种CSS属性来定制Flexbox的内容。
在这里，我们有一个包含多个col div的row div。row div的尺寸会根据设备的尺寸变化，但col div的尺寸是固定的。因此，我们使用了flex-wrap: wrap CSS属性来包裹row div中的内容。它会根据行宽度显示单行中col div的总数。
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<style>
.row {
height: auto;
width: 90%;
margin: 0 auto;
background-color: yellow;
padding: 10px 20px;
border: 2px solid green;
border-radius: 12px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.col {
height: 200px;
min-width: 200px;
background-color: red;
border: 2px solid green;
border-radius: 12px;
margin: 10px 20px;
}
</style>
</head>
<body>
<h2>Creating the <i> responsive website </i> by Using the media Queries in CSS. </h2>
<div class = "row">
<div class = "col">
</div>
<div class = "col">
</div>
<div class = "col">
</div>
<div class = "col">
</div>
</div>
</body>
</html>
用户在本教程中学习了如何制作响应式网站。上面的例子教会了我们制作响应式网站的各种CSS属性、函数和规则。开发人员需要使用所有的东西来制作一个实时网站。这里，我们仅出于学习目的在单个示例中使用单个属性。