Reactjs 的媒体查询语法

Question

如何在 Reactjs 中进行以下 CSS 媒体查询？

.heading {
  text-align: right;
  /* media queries */
  @media (max-width: 767px) {
    text-align: center;
  }
  @media (max-width: 400px) {
    text-align: left;
  }
}

我尝试了以下方法，但它会引发语法错误并且无法编译。

heading: {
  textAlign: 'right',
  @media (maxWidth: '767px') {
    textAlign: 'center';
  }
  @media (maxWidth: '400px') {
    textAlign: 'left';
  }
}

Answer 1

事实证明第二个答案非常有用，但是，它只是类组件中的示例，但是将其应用于功能组件通常很困难或很麻烦，而且由于有时将功能组件转换为有问题一类，这里我使用 Hooks

留下示例

import React, { useState, useEffect } from 'react';

const App = () => {
  const [matches, setMatches] = useState(
    window.matchMedia("(min-width: 768px)").matches
  )

  useEffect(() => {
    window
    .matchMedia("(min-width: 768px)")
    .addEventListener('change', e => setMatches( e.matches ));
  }, []);

  return (
    <div >
      {matches && (<h1>Big Screen</h1>)}
      {!matches && (<h3>Small Screen</h3>)}
    </div>
  );
}

export default App;

Answer 2

您可以在 React 中进行媒体查询：

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { matches: window.matchMedia("(min-width: 768px)").matches };
  }

  componentDidMount() {
    const handler = e => this.setState({matches: e.matches});
    window.matchMedia("(min-width: 768px)").addEventListener('change', handler);
  }
  render() {
    return (
      <div >
      {this.state.matches && (<h1>Big Screen</h1>)}
      {!this.state.matches && (<h3>Small Screen</h3>)}
      </div>
    );
  }
}

export default App;

https://stackblitz.com/edit/react-cu8xqj?file=src/App.js

---

09-10-2021 编辑：将 addListener 替换为 addEventListener，因为前者是 deprecated。感谢 John Galt 通过发表评论告知我们。

Answer 3

在reactjs项目中另一种编写媒体查询的方式：

style.js 文件：

root: {
 background: "white",

 "@media (max-width: 1920px)": {
   background: "red",
 }
}

style.css 文件：

.root: {
 background: "white";

 @media (max-width: 1920px) {
   background: "red";
 }
}

谢谢

Answer 4

aphrodite 可以帮忙。

这是example：

import React from "react";
import { StyleSheet, css } from "aphrodite";

import "./style.css";

const styles = StyleSheet.create({
  heading: {
    textAlign: "right",
    backgroundColor: "red",
    "@media (max-width: 767px)": {
      textAlign: "center",
      backgroundColor: "green"
    },
    "@media (max-width: 767px)": {
      textAlign: "center",
      backgroundColor: "blue"
    }
  }
});

export default function App() {
  return (
    <div className={css(styles.heading)}>
      <h1>Hello aphrodite!</h1>
    </div>
  );
}

Answer 5

如果你习惯使用 css，你可以使用 styled-components。它看起来像这样。

import React from 'react';
import Styled from "styled-components";

function YourComponent() {

    const heading = Styled.h1`
        Text-align:right;

            @media (max-width: 767px) {
                text-align: center;
            }
            @media (max-width: 400px) {
                text-align: left;
            }
    `;

   return(
        <>
           <heading>This is my heading</heading>
        </>
    )
}

如果你需要做很多样式，你可以在另一个 js 文件中做你的样式，并根据需要导入每个样式。如果您这样做，请不要忘记导出您的样式。

Answer 6

您不能内联设置媒体查询。您需要创建一个单独的 CSS 样式表，然后导入该样式表。

例如，以下代码将放入一个新的styles.css 文件中。

.heading {
  text-align: right;
  /* media queries */
  @media (max-width: 767px) {
    text-align: center;
  }
  @media (max-width: 400px) {
    text-align: left;
  }
}

然后，您可以将新的 CSS 样式文件导入您的 react 文件。例如，您可以将 import './styles.css' 添加到您的 App.jsx 文件的顶部（假设它们都在根级别），或者您可以将其直接导入到特定的 react 组件文件中。

Answer 7

在我的情况下，我使用自定义挂钩为我生成一些断点值：

import { useMediaQuery } from 'react-responsive';

export const useBreakpoints = () => {
  const isMobileSmall = useMediaQuery({ query: '(max-width: 325px)' });
  const isMobileMid = useMediaQuery({ query: '(max-width: 375px)' });
  const isMobileFloor = useMediaQuery({ query: '(max-width: 425px)' });

  const isTabletFloor = useMediaQuery({ query: '(max-width: 426px)' });
  const isTabletMid = useMediaQuery({ query: '(max-width: 768px)' });
  const isTabletCeil = useMediaQuery({ query: '(max-width: 1024px)' });

  const isLaptopFloor = useMediaQuery({ query: '(max-width: 1025px)' });
  const isLaptopCeil = useMediaQuery({ query: '(max-width: 1440px)' });

  const isXHDFloor = useMediaQuery({ query: '(max-width: 1441px)' });
  const isXHDCeil = useMediaQuery({ query: '(max-width: 4096px)' });

  return {
    isMobileSmall,
    isMobileMid,
    isMobileFloor,
    isTabletFloor,
    isTabletMid,
    isTabletCeil,
    isLaptopFloor,
    isLaptopCeil,
    isXHDFloor,
    isXHDCeil,
  };
};

我在 useMemo 内部的组件中调用它，这是不正确的 :)

所以我把它放在useMemo 之外，它就像魅力一样！

基本上我要指出的是避免使用嵌套的钩子调用！

Answer 8

还有一种方法可以通过对 ex 使用布尔值来包含媒体查询。

<div style={{window.innerWidth > 768 ? '800px' : '400px'}}/>

这很好地解决了问题

Answer 9

如果你有特殊情况，当你需要在你的 react 应用程序中获取媒体查询结果时（例如，你想在移动版本中显示一些组件），你可以使用像 react-responsive 或 react-media-hook 这样的 helpers。