标签：媒体查询

共 2 篇相关文章

IT 累计浏览 40

@custom-media

本文系统介绍了CSS Media Queries Level 5规范中的`@custom-media` at-rule，它允许开发者为复杂的媒体查询条件定义可复用的别名。其核心语法使用``（如`--modern-touch`）来声明一个媒体条件集合，并在`@media`规则中调用该别名。文章详细阐述了其作用域规则：与CSS自定义属性不同，`@custom-media`的定义是全局的，且在样式表处理时是静态解析，后续的重定义不会影响已处理的查询。该特性支持布尔常量（`true`/`false`）、逻辑运算符组合以及更简洁的CSS范围语法（如`(768px <= width <= 1024px)`）。一个独特能力是别名之间可以相互引用以构建语义化条件，但需避免循环依赖。通过定义通用断点或简化`prefers-reduced-motion`等常用查询，该功能显著提升了样式表的可维护性和可读性。需要注意的是，该别名目前无法通过JavaScript的`matchMedia()`访问，且浏览器原生支持度有限，文章建议使用`@supports`进行检测或借助PostCSS等构建工具实现渐进增强。

IT 累计浏览 3,150

iPad Orientation CSS

这篇讲的是如何可靠地处理iPad屏幕旋转时的CSS适配问题。很多开发者习惯使用CSS媒体查询中的orientation属性（landscape或portrait）来区分横竖屏，但在iPad上，这个属性可能存在判断延迟或不准确的情况，导致样式切换出现闪烁或错位。作者从实际开发中遇到的布局错乱问题出发，深入分析了其根源：orientation媒体查询在iPad OS上并非实时响应设备的物理旋转。文章提出了一套更稳定的解决方案——优先使用基于视口宽度的媒体查询（例如 @media (min-width: 1024px) 和 @media (max-width: 1023px)）来定义横竖屏样式，并结合少量JavaScript来监听设备方向变化并添加对应的class。这种混合方案能确保样式切换与设备旋转动作精确同步。文章不仅给出了原理对比，还提供了完整的代码示例和针对不同iPad型号的测试结论。对于需要确保iPad上完美响应式体验的前端开发者来说，这是一个非常实用的避坑指南和优化技巧。