HTML响应式 HTML响应式|HTML5

本文概述

响应式图像
如何使图像响应？
通过使用最大宽度属性
根据浏览器宽度更改图像
响应文字大小
媒体查询

响应式网页设计
响应式网页设计用于使你的网页在所有设备（台式机, 平板电脑, 智能手机等）上看起来适当, 良好且位置合理。
【HTML响应式】响应式网页设计使用HTML和CSS来调整, 隐藏, 缩小, 放大或移动内容。它使内容在任何屏幕上看起来都不错。
设置视口
让我们看看如何设置视口。
如何设置视口
响应式图像可以很好地缩放以适合任何浏览器大小的图像称为响应图像。
如何使图像响应？通过使用width属性
将CSS width属性设置为100％, 以使图像响应并放大和缩小。
例

< !DOCTYPE html> < html> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < body> < h2> Responsive Image< /h2> < p> When we set the CSS width property to 100%, it makes the image responsive. Resize the browser window to see the effect.< /p> < img src="http://www.srcmini.com/img_girl.jpg" style="width:100%; "> ( change image) < /body> < /html>

立即测试
注意：上述方法（宽度：100％）的问题是图像可以放大到大于原始尺寸。因此, 最好改用max-width属性。通过使用最大宽度属性此方法是最好的方法, 也是使用最多的方法, 因为它可以使图像按比例缩小, 但绝不要放大到大于原始大小。
例

< !DOCTYPE html> < html> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < body> < h2> Responsive Image< /h2> < p> "max-width:100%" makes the image responsive and also ensures that the image doesn't get bigger than its original size.< /p> < p> Resize the browser window to see the effect.< /p> < img src="http://www.srcmini.com/img_girl.jpg" style="max-width:100%; height:auto; "> (Change the image) < /body> < /html>

立即测试
根据浏览器宽度更改图像通过使用HTML < picture> 元素, 你可以根据浏览器的宽度设置两个或更多图像。更改浏览器大小时, 它将更改图片。即台式机和电话。
例

< !DOCTYPE html> < html> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < body> < h2> Change Images Depending on Browser Width< /h2> < p> Resize the browser width and the image will change at 600px and 1500px.< /p> < picture> < source srcset="img_smallflower.jpg" media="(max-width: 600px)"> (Change image) < source srcset="img_flowers.jpg" media="(max-width: 1500px)"> (Change image) < source srcset="flowers.jpg"> < img src="http://www.srcmini.com/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; "> Here size is 10vw.< /h1> < p style="font-size:6vw; "> Here size is 6vw.< /p> < p style="font-size:4vw; "> Here size is 4vw.< /p> < p> Resize the browser window to see how the text size changes.< /p> < /body> < /html>

立即测试
注意：视口指定浏览器窗口的大小。 1vw =视口宽度的1％。意思是, 如果视口为100cm宽, 则1vw为1.0cm。媒体查询我们还可以使用媒体查询来制作响应式网站。从此处阅读媒体查询的详细信息：媒体查询