html - 在(仅)css 中查找浏览器宽度 px 和高度 px

Question

我想知道是否有可能仅使用 CSS 获取页面的浏览器/视口(viewport)像素尺寸并将其显示在页面上(最好使用“内容”样式)。我正在为我的一个元素(完全用 CSS 构建)这样做。我知道使用 JS 很容易找到它，但这不是本练习的重点。

我产生的一种方法是使用预处理器的帮助为每个像素逐字创建媒体查询，直至达到设定的数量，例如 3000 像素，如下所示。

/* WIDTH */
$width: 3000;

@for $i from 1 through $width {
    @media (min-width: #{$i}px) {.stat__size-width:after {content: "#{$i}px";}}
}

我不太关心优化和效率(正如你可以通过当前方法看到的那样，它将创建 3000 多个 css 媒体查询和选择器，只是为了宽度)但是如果有更好的方法我只是忽略请帮帮我!

---

在这里您可以更详细地查看元素:http://codepen.io/aaronvanston/pen/NPZMdo

Answer 1

您可以使用 100vh 和 100vw

这会获取 100% 的视口(viewport)高度和 100% 的视口(viewport)宽度