如何操作屏幕大小/视口大小，以便桌面显示移动版网站？

Question

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

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

Answer 1

我认为您正在寻找的是媒体查询。 Check out this article on 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>

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

Here is a fiddle 这样您就可以在调整窗口大小的同时看到它的工作原理。

注意事项

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

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