📌  相关文章
📜  HTML 响应式web

📅  最后修改于: 2020-11-02 02:57:22             🧑  作者: Mango

HTML 响应式

响应式网页设计

响应式网页设计用于使您的网页在所有设备(台式机，平板电脑，智能手机等)上看起来合适，良好且位置合理。

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

设置视口

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

如何设置视口

响应式图像

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

如何使图像响应?

通过使用width属性

将CSS width属性设置为100％，以使图像响应并放大和缩小。

例






Responsive Image


When we set the CSS width property to 100%, it makes the image responsive.  
Resize the browser window to see the effect.

( change image)

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

通过使用最大宽度属性

此方法是最佳方法，也是最常用的方法，因为它可以使图像按比例缩小，但绝不要放大到大于原始大小。

例






Responsive Image


"max-width:100%" makes the image responsive and also ensures that the image 
doesn't get bigger than its original size.


Resize the browser window to see the effect.

 (Change the image)

根据浏览器宽度更改图像

通过使用HTML元素，您可以根据浏览器的宽度设置两个或更多图像。更改浏览器大小时，它将更改图片。即台式机和手机。

例






Change Images Depending on Browser Width


Resize the browser width and the image will change at 600px and 1500px.


(Change image)
(Change image)

Flowers

响应文字大小

我们可以使用“ uv”单位使文本大小响应。这意味着视口宽度。通过使用此选项，我们可以使文本大小跟随浏览器窗口屏幕。

例






Here size is 10vw.


Here size is 6vw.


Here size is 4vw.


Resize the browser window to see how the text size changes.

注意：视口指定浏览器窗口的大小。 1vw =视口宽度的1％。意思是，如果视口为100cm宽，则1vw为1.0cm。

媒体查询

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