HTML 自适应
HTML 响应式网页设计
响应式网页设计用于使您的网页看起来合适，良好且可以很好地放置在所有设备（台式机，平板电脑，智能手机等）上。
自适应网页设计使用HTML和CSS来调整大小，隐藏，缩小，放大或移动内容。
响应式图像
可以很好地缩放以适合任何浏览器大小的图像称为响应式图像。
如何使图像具有响应性？
通过使用width属性
将CSS width属性设置为100％使图像响应并放大和缩小。
示例
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>响应图像</h2>
<p>当我们将CSS width属性设置为 100 ％时，它将使图像响应。调整浏览器窗口的大小以查看效果。</p>
<img src="img_girl.jpg" style="width:100%;">(更改图片)
</body>
</html>
注意：上述方法（宽度：100％）的一个问题是图像可以放大到大于原始大小。因此，最好改用max-width属性。
使用max-width属性
此方法是最好的方法，也是使用最多的方法，因为它可以使图像按比例缩小，但是从不缩放可以大于其原始大小。
示例
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>响应图像</h2>
<p>"max-width:100%" 使图像响应并确保图像不会比原来的尺寸大。
<p>调整浏览器窗口的大小以查看效果。</p>
<img src="img_girl.jpg" style="max-width:100%;height:auto;">(更改图像)
</body>
</html>
根据浏览器宽度更改图像
通过使用HTML
元素，可以根据浏览器宽度设置两个或更多图像。更改浏览器大小时，它将更改图片。即台式机和电话。 示例
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>根据浏览器宽度更改图像</h2>
<p>调整浏览器的宽度，图像将更改为600px和1500px。</p>
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">(更改图片)
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">(更改图片)
<source srcset="flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
</body>
</html>
响应文本大小
我们可以使用" uv"单元使文本大小响应。这意味着视口宽度。通过使用此选项，我们可以使文本大小跟随浏览器窗口屏幕。
示例
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h1 style="font-size:10vw;">这里的大小是10vw。</h1>
<p style="font-size:6vw;">这里的大小是6vw。</p>
<p style="font-size:4vw;">这里的大小是4vw。</p>
<p>调整浏览器窗口的大小以查看文本大小如何变化。</p>
</body>
</html>
注意： viewport指定浏览器窗口的大小。 1vw =视口宽度的1％。意思是，如果视口为100cm宽，则1vw为1.0cm。
