Question

我想知道是否可以获取页面的浏览器/视口像素尺寸并将其显示在页面上（最好使用＆＃34;内容＆＃34;样式）只用CSS。我是为我的一个项目做的（完全用CSS构建）。我理解使用JS很容易找到它，但这不是本练习的重点。

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

/* WIDTH */
$width: 3000;

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

我不太关心优化和效率（正如您可以通过当前方法看到它将创建3000+ css媒体查询和选择器仅用于宽度）但是如果有更好的方式我可以＃39 ;我只是俯视请帮助我！

您可以在此处更详细地查看该项目：http://codepen.io/aaronvanston/pen/NPZMdo

Answer 1

您可以使用100vh或100vw

这会抓取100％视口高度和100％视口宽度