文章标签

一种无需JavaScript即可计算视窗宽度和高度的方法，由Temani Afif在CSS Tip上提供

@property --_w {
  syntax: '<length';
  inherits: true;
  initial-value: 100vw; 
}
@property --_h {
  syntax: '<length';
  inherits: true;
  

我们拥有视窗单位（例如vw、vh、vmin、vmax），它们大多都非常棒。能够始终拥有一个相对于整个屏幕的单位真的很酷。但当你问人们什么是…

在本周的综述中，我们重点介绍了对新<popup>元素的提案，检查了获奖网站对prefers-reduced-motion的使用，了解如何选择加入跨域隔离，了解WhiteHouse.gov如何处理无障碍性，并警告使用100vh的风险。…

深入研究来自Ahmad。我喜欢对vmin和vmax的介绍，我认为我并没有像应该的那样经常使用它们。

我认为，如果你正在做一些高度方向性的操作（例如 全出血技巧…

David Chanin 有一篇快速文章总结了在移动浏览器中将元素的height设置为100vh，然后又在该元素底部定位其他元素所带来的问题。…

假设你要让一个元素在屏幕上弹跳，就像一个老式屏幕保护程序或Pong之类的东西。

你可能需要跟踪元素的X位置，在时间循环中增加或减少它…

视窗单位一直存在争议，部分原因是移动浏览器通过自己对视窗单位实现方式的理解，使情况变得更加复杂。

例如：滚动条是否应该被考虑在…

视窗单位已经存在几年了，在主要浏览器中几乎完全支持，但我不断发现新的、令人兴奋的使用方式。我认为回顾一下基础知识，然后…

视窗单位例如 10vw（视窗宽度的 10%）或 2vh（视窗高度的 2%）。在某些情况下非常有用，因为它们始终相对于视窗。不会受到父元素的级联或影响。

还有 vmin，它…