1

抱歉这个模棱两可的问题，在这里编码菜鸟。本质上，我有一个站点，其中整个容器设置为 100vw，然后字体大小也设置为 vw。这样无论我如何扩展网站，无论是在移动设备还是桌面设备上，它都能很好地显示。
但是，我希望它在桌面上显示，就好像它是一个移动大小的屏幕（基本上是你在 Chrome 中执行移动视图时获得的视图）。
如果我将容器的宽度调整为小于 100vw，那很好，但是由于字体仍然是相对于视口设置的，因此对于该宽度来说它们变得太大了。所以基本上我想找到一种方法来告诉计算机，“即使你的实际设备宽度是这个，就好像设备宽度是这个一样”。

我<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=yes">在我的 html 文件中，并尝试将宽度设置为各种 px 数量而不是设备宽度，但仍然没有运气。非常感谢您的帮助！

4

1 回答 1

1

我认为您正在寻找的是媒体查询。查看这篇关于 CSS-Tricks 的文章。

媒体查询允许您根据用户设备的属性进行选择，例如屏幕大小。这类似于伪类如何:hover使选择器更具体，除了您将样式嵌套在一个@media块中。

通常，如果您希望您的网站根据屏幕宽度更改外观，这将是最简单、最可靠的方法。例如，您设置了相对于视口的字体大小，但您不希望它变得太大。您可以添加一个设置最大大小的媒体查询，如下所示：

body {
  margin: 0;
}

#content {
  width: 100vw;
  font-size: 100vw;
  
  margin: auto;
  overflow: hidden;
  background: #ddd;
}
    
@media all and (min-width: 300px) {
  #content {
    width: 300px;
    font-size: 300px;
  }
}
<div id="content">
  Lorem ipsum
</div>

当屏幕至少有 300px 宽时，后一种样式会覆盖前一种，因为它更具体。

这是一个小提琴，因此您可以在调整窗口大小时看到它的工作原理。

笔记

  1. 将元属性设置viewport为device-width主要只是告诉移动浏览器您的网站适用于小屏幕。没有这个，一些浏览器本质上会“缩小”，因此它呈现的屏幕就像一个普通的监视器一样大。这样，即使一切都非常小，在小屏幕上一切仍然看起来不错。这不是为了告诉浏览器使用“移动模式”。那不是一回事。

  2. vw对于大多数文本，您可能应该避免将字体大小设置为单位。您应该坚持使用基本单位，如rem、em或pt字体，因为用户可以在浏览器中设置会影响字体大小的可访问性选项。您希望您的用户拥有他们想要的字体大小。仅用于vw主要标题/标题等特殊文本，而不用于文章等大型文本。

于 2019-05-10T06:11:47.273 回答