什么是响应式网站？
如果我们在任何设备上打开响应式网站，每个网页的内容都不会溢出或被其他网页覆盖。例如，在任何尺寸的设备上打开TutorialsPoint.com网站。用户可以观察到网页的内容保持不变，但内容的替换变得不同，以便内容可读。
So, the basic thing of the responsive website is to make content visible and stylish on every device.
为什么我们需要一个响应式网站？
Now, the question is why we should require a responsive website. Well, here is the answer.
在早期，用户只能从桌面访问网站，但现在，用户可以从不同尺寸的设备上访问网站，例如移动设备和平板设备。甚至大多数网站的访问量来自移动设备，而不是桌面设备。
现如今，每家企业都在互联网上运营，并试图通过网站在线吸引客户。如果有用户通过移动设备访问您的网站，而您的网站不具备响应式设计，用户会立即关闭您的网站并转向竞争对手的网站。
所以，一个响应式的网站对于获得更多的客户和访问者是很有用的。
如何开始创建响应式网站？
我们需要根据浏览器的尺寸使用常见的断点，并相应地为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内容将保持网页不变，但我们需要以这样的方式编写CSS，以便在每个设备上都可以轻松阅读HTML内容。
Example 1 (Set Element Dimensions in Percentage)
In the example below, we have a ‘container’ div element containing two ‘col’ div elements. We have set the dimensions of the container div element in the percentage and the dimensions for the ‘col’ div element in the percentage.
在输出中，用户可以观察到它在任何尺寸的设备上都是可读的。
<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>
Example 2 (Using the Media Query)
在下面的示例中，我们使用了媒体查询来创建响应式的网页设计。使用媒体查询，我们可以为网页添加断点，并为每个设备单独设置样式。
Here, users can observe that we have changed the dimensions of the ‘main’ div for the devices that have widths less than 600px. Also, we have changed the font-size, font color, and margin for the mobile devices using the media query.
<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函数）
In the example below, we have used the clamp() function to make our web page responsive. The clamp() function takes three arguments, and the first is the minimum width, the second is a percentage, and the third is the maximum width.
在这里，我们将400px作为第一个参数，30%作为第二个参数，600px作为clamp()函数的第三个参数传递，这意味着在任何设备上，卡片的宽度永远不会低于400px，也不会超过600px。如果屏幕宽度的30%介于400px和600px之间，则该值将被设置为卡片的宽度。
In the output, users can observe the card on different devices and check if it is responsive.
<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的内容。
Here, we have a ‘row’ div containing multiple ‘col’ div. The dimensions of the ‘row’ div change according to the device’s dimensions, but the dimensions of the ‘col’ div are fixed. So, we have used the ‘flex-wrap: wrap’ CSS property to wrap the content inside the ‘row’ div. It shows the total number of ‘col’ divs in the single rows based on the width of the row.
<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属性、函数和规则。开发人员需要将所有这些内容结合起来，才能制作出实时网站。在这里，我们仅仅为了学习目的，在单个示例中使用了单个属性。
以上就是关于响应式网站需要了解什么？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 关于响应式网站需要了解什么？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
