我正在制作我的WordPress网站响应式。我正在处理的页面上有两个图像,我想设置它们的
这些元素上唯一的CSS是:
max-width
为100%,使它们响应式(这是我在另一个网站上所做的,效果非常好)。然而,我注意到当我在Chrome开发工具中缩小页面时,<html>
和<body>
元素会缩小到非常奇怪的大小,与视口大小完全无关。以下是在Chrome开发工具中悬停在<html>
和<body>
元素上的截图:
当然,由于max-width
使用百分比值,“定义包含块的最大宽度”,并且这里的包含块(<html>
和body
)以这种不寻常的方式调整大小,因此当我将图像设置为max-width:100%
时,它们基于这些元素的奇怪大小进行调整。这些元素上唯一的CSS是:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
所以我的问题是,<html>
和 <body>
元素的尺寸从哪里获取?
<meta content="width=device-width, initial-scale=1" name="viewport">
来支持媒体查询时,这种情况发生在我身上。 - undefined