我知道在 JS 中有 screen.width 但我想知道我是否可以用纯 CSS 来做到这一点...
<style>
.screen {width:100%; height: 100%;}
.red {background: pink; float: left;}
.blue {background: lightblue; float: left;}
.green {background: lightgreen; float: left;}
.row {height: 100%; clear:both;}
body {margin: 0;}
</style>
<body>
<div class="row">
<div class="screen red">foo</div>
<div class="screen blue">foo</div>
<div class="screen green">foo</div>
</div>
<div class="row">
<div class="screen red">foo</div>
<div class="screen blue">foo</div>
<div class="screen green">foo</div>
</div>
</body>
我想要的是:
每个 .screen 都是我的浏览器视口(viewport)的大小，我有两行，每行三个 .screen。因此，我可以水平滚动视口(viewport)宽度的 3 倍，并且可以垂直滚动视口(viewport)高度的 2 倍。
我从这段代码中得到的是:所有 DIV 的大小都适合我的视口(viewport)，但只是垂直堆叠。
最佳答案
可能不完全是您想要的，但如果您将 .row 设置为 300% 宽度并将 .screen 设置为 33.333% 宽度，它会表现得像那样。
关于css - 在 CSS 中获取屏幕宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20809859/