什么是响应式设计？
响应式网页设计，运用 HTML 和 CSS 技术，自动对网站进行尺寸调整、内容隐藏、元素收缩或放大等操作。
响应式网页设计，在所有设备上呈现良好视觉效果，自动针对不同的屏幕尺寸和视口进行调整。
viewport 设置
创建响应式网站，要先把<meta>标签添加到你所有的网页中：
<meta name="viewport" content="width=device-width, initial-scale=1.0">设置页面viewport，它会向浏览器提供有关如何控制页面尺寸和缩放比例的指令。
响应式图片
响应式图像是指能够完美缩放以适应任何浏览器尺寸的图像。
1. 使用 width 属性
如果将 CSS 的 width 属性设置为 100%，图像将具有响应式特性，能够进行放大和缩小调整：
<img style="width: 100%; height: auto;" src="/uploads/20250308/20250308173430.jpg" alt="">2. 使用 max-width 属性
如果将 CSS 的 width 属性设置为 100%，图像将具有响应式特性，能够进行放大和缩小调整：
<img style="max-width: 100%; height: auto;" src="/uploads/20250308/20250308173430.jpg" alt="">3. 根据浏览器宽度，显示不同的图片
<picture>元素允许你针对不同的浏览器窗口大小定义不同的图片。
调整浏览器窗口的大小，看看下面的图片是如何根据宽度变化的：
<picture>
<source srcset="/uploads/20250308/dog-small.jpg" media="(max-width: 600px)">
<source srcset="/uploads/20250308/dog.jpg" media="(max-width: 800px)">
<source srcset="/uploads/20250308/dog-big.jpg">
<img src="/uploads/20250308/dog.jpg" alt="狗狗">
</picture>响应式文字大小
文本大小可以使用 “vw” 单位来设置，这个单位表示 “viewport width”。
通过这种方式，文本大小将会跟随浏览器窗口的大小而变化：
Hello World
Resize the browser window to see how the text size scales.
<h1 style="font-size:8vw">Hello World</h1>Viewport就是浏览器窗口的大小。1vw 等于Viewport宽度的 1%。如果Viewport的宽度是 50 厘米，那么 1vw 就是 0.5 厘米。
媒体查询
除了调整文本和图像的大小之外，在响应式网页中使用媒体查询也是很常见的做法。
通过媒体查询，你可以针对不同的浏览器尺寸定义完全不同的样式。
<style>
.left, .right {
float: left;
width: 20%;
}
.main {
float: left;
width: 60%;
}
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
评论区 0
发表评论
教程介绍
HTML 超文本标记语言，一种用于创建网页的标准标记语言，在浏览器上运行和解析。
60
章节
132
阅读
0
评论