Question

我正在制作一个网站，我的横幅左上角带有徽标，右上角是英国国旗（添加了img元素）。我已经指定了两个图像的高度（两个都是svg），并且当窗口大于970px时，图像的高度看起来不错。当窗口小于970px时，两个图像也会缩小。有人知道如何解决此问题吗？

我将徽标更改为png，结果相同，即使添加文本，文本也会缩小，即使它具有指定的字体大小，在主，旁或页脚中也不会出现这种情况。我还尝试了另一个css样式表，该样式表与另一个文档没有相同的问题（尽管该样式表不适合当前正在使用的html文档），但当前文档的结果是一样。

nav ul {
  margin: 0;
  padding: 0;
  align-items: center;
  background-color: rgb(255, 255, 255, .8);
  list-style-type: none;
  display: flex;
  justify-content: center;
}

nav ul li {
  flex: none;
}

我希望当窗口调整大小时图像会保持相同的大小，但是它们也会随窗口调整大小。

Answer 1

将视口元标记添加到您的<head>：

<meta name="viewport" content="width=device-width, initial-scale=1">

文档：https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

当视口宽度变小时，标头中的所有内容都变小。我该如何改变？

1 个答案: