React中的内联CSS样式：如何实现媒体查询？ [英] Inline CSS styles in React: how to implement media queries?

问题描述

我非常喜欢内联CSS模式（视频）在React中，我正在考虑使用它。但是我有一个类似于这个问题的问题。

I quite like the inline CSS pattern (video) in React and i am thinking about using it. However i have a question similar to this one.

如何使用React的内联CSS模式为应用程序实现媒体查询。

How does one go about implementing media queries for an application using React's inline CSS pattern.

推荐答案

你做不到。有一些CSS功能，如 @media 查询，必须在声明块。

You can't. There are certain CSS features, like @media queries, that must be defined in a declaration block in a stylesheet.

虽然内联CSS非常适合可应用于键值对的大多数样式属性，它不是专用样式表的完全替代品。

While inline CSS is great for most styling attributes that can be applied in key-value pairs, it isn't a complete replacement for dedicated stylesheets.

编辑：

有实验对象可用某些浏览器（Chrome 9 +，IE 10 +，Firefox 6+）允许您在文档上的媒体查询发生更改时添加事件侦听器，例如 MediaQueryList 。

There are experimental objects available in certain browsers (Chrome 9+, IE 10+, Firefox 6+) that allow you to add event listeners when media queries on the document change, such as MediaQueryList.

有一个名为 Radium 提供mixins，用于根据活动媒体查询应用条件样式，使用 MediaQueryList 。

There is a nascent React project called Radium that provides mixins for applying conditional styling based on the active media queries, using MediaQueryList under the hood.

这篇关于React中的内联CSS样式：如何实现媒体查询？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！