HTML 教程

HTML 属性

HTML 标签列表

HTML API

HTML 案例

HTML 颜色

HTML5 进阶

HTML 其它

HTML 面试问题

HTML 响应式

响应式网页设计

响应式网页设计用于使您的网页在所有设备（台式机、平板电脑、智能手机等）上看起来合适、良好且放置得很好。

响应式网页设计使用 HTML 和 CSS 来调整、隐藏、缩小、放大或移动内容。它使内容在任何屏幕上看起来都很好。

设置视口

让我们看看如何设置视口。

如何设置视口

响应式图像

可以很好地缩放以适应任何浏览器大小的图像被称为响应式图像。

如何使图像响应？

通过使用宽度属性

将 CSS 宽度属性设置为 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="img_girl.jpg" style="width:100%;">( change image)  
</body>  
</html>

注意：上述方法（宽度：100%）的一个问题是图像可以放大到大于其原始尺寸。因此，最好改用 max-width 属性。

通过使用 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="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="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%。意思是，如果视口宽 100 厘米，则 1vw 为 1.0 厘米。

媒体查询

我们还可以使用媒体查询来制作响应式网站。从这里阅读媒体查询的详细信息：媒体查询


上一主题 HTML 布局技术 下一主题 HTML 计算机代码
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具