利用React实现多个场景下的鼠标跟随框提示框

最新推荐文章于 2024-08-10 07:36:03 发布

梅花十三儿

最新推荐文章于 2024-08-10 07:36:03 发布

阅读量234

点赞数

文章标签： react.js javascript css

本文链接：https://blog.csdn.net/Android062005/article/details/127768199

版权

本文介绍了CSS容器查询的引入及其在React应用中的重要性，详细阐述了如何利用容器查询来实现组件根据父级容器宽度的响应式布局。通过具体的代码示例，展示了如何使用和属性进行容器查询，并提到了命名容器以避免混乱的方法。目前，容器查询已得到Chrome 105的支持，并计划在Safari 16中推出。文章提供了10个实战案例链接，供读者进一步探索。

摘要由CSDN通过智能技术生成

CSS容器查询终于来了! 它们目前在谷歌浏览器（105）中得到了支持，很快就会在Safari 16中得到支持。这对前端来说容器查询与媒体查询一样重要。

在这节课中，我们介绍一下容器查询是如何工作的，如何使用它们，以及语法是什么样子的，并分享一些现实生活中的例子和用例。

简介

在设计一个组件时，我们需要适配不同的变化，并根据CSS类或视口大小来改变它们。这对于我们开发来说不是很理想，会迫使我们根据变化类或视口尺寸来写CSS。

考虑下面例子：

我们有一个卡片组件，当视口足够大时，它应该切换到水平样式。乍一看，这可能听起来不错。然而，当你更深入地思考这个问题时，它就有点复杂了。

如果我们想在不同的地方使用同一个卡片组件，比如在空间狭小的侧边栏和有更多空间的主区域，我们就需要使用不同的类来适配：

.c-article {/* Default stacked style */
}

@media (min-width: 800px) {/* Horizontal style. */.c-article--horizontal {display: flex;align-items: center;}
}

如果我们不想用上面的方式，那么会出现下面这样的情况：