Question

我正在使我的wordpress网站响应。我正在处理的页面上有两个图像，我想设置一个100％的max-width以使它们响应（这是我在我制作的另一个网站上做的，它工作得非常好）。但是，我注意到，当我在Chrome开发工具中缩小页面时，<html>和<body>元素正在缩小到非常奇怪的大小，与视口大小完全无关。下面是分别在chrome dev工具中悬停的元素和元素的屏幕截图：

当然，由于max-width具有百分比值，“定义包含块的最大宽度”以及此处包含的块（<html>和body）正在调整自身大小这种不同寻常的方式，当我将图像设置为max-width: 100%时，它们会将这些图像设置为奇怪的大小。

我对这些元素的唯一CSS是：

* {
  box-sizing: border-box;
}


body {
  margin: 0;
}

所以我的问题是，<html>和<body>元素的大小来自哪里？

Answer 1

这种行为最初是在几个版本之前在Chrome中发生的;尝试使用FF（Moz / Firefox）响应式开发工具测试您的站点/屏幕 - 我猜你会看到你期望的结果。但这不一定是Chrome的问题;就我而言，它与环境有关。这些天我主要使用AEM，如果我在auth模式/禁用（或直接授权模式）下测试，则会出现此问题。但是，如果我在生产中查看相同的页面=没有问题。所以我的猜测（至少对我们来说）是它与CMS或服务器设置有关。这些天我倾向于使用FF响应开发工具 - 尝试一下，让我们知道你是如何做出来的。

Answer 2

在浏览器中检查缩放级别是否设置为100％（正常）。

Answer 3

我只是设法解决相同的问题。问题是文本强制视口宽度。您只需调整字体大小即可解决此问题。

Body / HTML元素缩小为远小于视口

3 个答案: