注释

Question

很抱歉这个模棱两可的问题，在这里编码noob。本质上，我在一个站点上将整个容器设置为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>

当屏幕的宽度至少为300px时，后一种样式会覆盖前一种样式，因为它更具针对性。

Here is a fiddle，因此您可以在调整窗口大小时看到它的工作状态。

注释

将元属性viewport设置为device-width主要是告诉移动浏览器您的网站可以在小屏幕上运行。否则，某些浏览器将本质上“缩小”，以使其呈现得像屏幕和普通监视器一样大。这样，即使一切都非常小，在小屏幕上一切仍然看起来还不错。这不是告诉浏览器使用“移动模式”。没关系。
对于大多数文本，您应该避免将字体大小设置为vw单位。对于字体，您应坚持使用rem，em或pt之类的基本单位，因为用户可以在浏览器中设置会影响字体大小的辅助功能选项。您希望用户拥有他们想要的字体大小。仅在诸如主标题/标题之类的特殊文本上使用vw，而不对诸如文章之类的较大文本使用。{p>

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

1 个答案:

注释