css中的媒体查询没有响应答案

【问题标题】：Media query in jss not responivecss中的媒体查询没有响应
【发布时间】：2019-06-02 18:37:37
【问题描述】：

我在带有@media 查询的反应元素中使用样式道具。但由于某种原因，它没有响应。我正在使用 JSS。这是我的代码

const style = {
    usernameConatiner: {
        display: "flex",
        alignItems: "center",
        backgroundColor: "red"
    },  
    "@media screen and minWidth(32em)": {
        usernameConatiner: {
            backgroundColor: "blue"
        }
     }
}

中间显然还有一大堆其他的 CSS 规则。我也尝试嵌套媒体查询，但它也不起作用。

如下渲染方式

<div style={styles.usernameConatiner} />

我在这里遗漏了一些非常明显的东西吗？

【问题讨论】：

不应该是这样的："@media screen and (min-width: 32em)"？
在 chrome 中它给了我一个错误 insupported style property &media screen and min-width(32em)

标签： css reactjs responsive-design jss

【解决方案1】：

既然您已经在 JS 中并且想要编写一个依赖于宽度的样式，那么获取 window.width 并相应地定义您的样式对象不是更容易吗？

永远记住您可以使用window.addEventListener('resize', this.updateWindowWidth); 来处理更改。

【讨论】：

【解决方案2】：

发生这种情况是因为您的媒体查询未在样式对象上正确定义。

正确的媒体查询应该是@media screen and (min-width: 32em)，注意min-width: 32em在括号内，还要注意写成min-width（用破折号分隔）而不是minWidth（camelCase）

检查它在 CodePen 上的工作情况：https://codepen.io/anon/pen/yGEXox

总而言之，您的样式对象应如下所示：

const style = {
  usernameContainer: {
    display: 'flex',
    alignItems: 'center',
    backgroundColor: 'red'
  },  
  '@media screen and (min-width: 32em)': {
    usernameContainer: {
      backgroundColor: "blue"
    }
  }
}

希望这对你有用。

【讨论】：

【解决方案3】：

这里有两件事。

您的media query 语法不正确。
您不能直接在 JSS（JS 中的 CSS）中使用媒体查询/伪选择器，如 &:hover, &:disabled 等。为此，您必须安装第三方软件包 Radium https://www.npmjs.com/package/radium

安装 - npm install --save radium

如何使用？

安装镭后，您的整个应用程序应包含<StyleRoot/>，这是镭的命名导出。最好的地方是 index.js。

index.js

import { StyleRoot } from "radium";

ReactDOM.render(
  <StyleRoot>
    <App />
  </StyleRoot>,

  document.getElementById("root")
);

您现在需要像这样用 Radium 包装您正在使用媒体查询的组件。这可以对类和函数组件进行。

MyComponent.js

import Radium from 'radium'
     
function MyComponent(){

const myStyle = {
 
   color: 'blue',
   backgroundColor : 'red',
   
   // media query

   "@media (max-width: 1100px)": {

      color:'orange',
      backgoundColor : 'black'
     
    }, 

}

return (
  <p style = {myStyle}>Enter your text here</p>
)

}

export default Radium(MyComponent);

【讨论】：