Reactjs의 미디어 쿼리 구문

Reactjs의 미디어 쿼리 구문

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';
  }
}

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전자는 폐지되었으므로.댓글로 알려준 John Galt에게 감사드립니다.

Ferit의 답변은 매우 유용했지만, 클래스 컴포넌트의 예에 불과했지만, 그것을 기능 컴포넌트에 적용하는 것은 보통 어렵거나 번거로운 일이며, 기능 컴포넌트를 클래스 컴포넌트로 변환하는 것은 때때로 문제가 있기 때문에 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;

리액션 앱 내에서 미디어 쿼리 결과를 얻을 필요가 있는 경우(예를 들어 모바일 버전으로 컴포넌트를 표시하고 싶은 경우), 리액트 리액트 리액트 리액트 미디어 훅 등의 도우미를 사용할 수 있습니다.

미디어 쿼리를 인라인으로 설정할 수 없습니다.개별 CSS 스타일시트를 작성한 후 스타일시트를 Import해야 합니다.

그래서 다음 코드가 새로운 코드로 들어갑니다.styles.css예를 들어 파일입니다.

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

그런 다음 새로운 CSS 스타일 파일을 리액트파일로 Import할 수 있습니다.예를 들어 다음과 같이 추가할 수 있습니다.import './styles.css'최대한으로App.jsx파일(둘 다 루트레벨에 있는 것을 확인), 또는 특정 리액트 컴포넌트 파일로 직접 Import 할 수 있습니다.

reactjs 프로젝트에서 미디어 쿼리를 작성하는 또 다른 방법:

style.filename 파일:

root: {
 background: "white",

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

style.css 파일:

.root: {
 background: "white";

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

감사해요.

css 사용에 익숙하다면 스타일 컴포넌트를 사용할 수 있습니다.이렇게 생겼을 거예요.

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 파일에서 스타일을 수행하고 필요에 따라 각 스타일을 가져올 수 있습니다.이 경우 스타일을 내보내는 것을 잊지 마십시오.

커스텀 훅을 사용하여 브레이크 포인트 값을 생성하고 있었습니다.

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매력적으로 작용했어요!

기본적으로 제가 말하고자 하는 것은 네스트 후크콜을 사용하지 말라는 것입니다!

이 코드 조각처럼 자신만의 커스텀 훅을 만들 수 있습니다.

훅/use Style Media Query.js

import { useState, useEffect } from 'react'

export const useStyleMediaQuery = ({ mixOrMax, widthOrHeight, value }) => {

  if (!mixOrMax) mixOrMax = 'min';
  if (!widthOrHeight) widthOrHeight = 'width';

  const [matches, setMatches] = useState(
    window.matchMedia(`(${mixOrMax}-${widthOrHeight}: ${value}px)`).matches
  )

  useEffect(() => {
    window
      .matchMedia(`(${mixOrMax}-${widthOrHeight}: ${value}px)`)
      .addEventListener('change', e => setMatches(e.matches));
  }, [mixOrMax, widthOrHeight, value]);

  return { matches }

}

App.js

import { useStyleMediaQuery } from 'hooks/useStyleMediaQuery'

import ComponentIwantToShowOnlyOnMobile from 'components/ComponentIwantToShowOnlyOnMobile'
import ComponentIwantToShowOnlyOnDesktop from 'components/ComponentIwantToShowOnlyOnDesktop'

function App() {

    const { matches: isMobile } = useStyleMediaQuery({ mixOrMax: 'max', widthOrHeight: 'width', value: 767 });
    const { matches: imSmall } = useStyleMediaQuery({ mixOrMax: 'max', widthOrHeight: 'width', value: 400 });

    return (
        <>
            {isMobile && <ComponentIwantToShowOnlyOnMobile />}
            {!isMobile && <ComponentIwantToShowOnlyOnDesktop />}
            {imSmall && <h1>I'm very small.. 400px width or less</h1>}
        </>
    );
}

export default App;

이상입니다:)

또한 ex의 부울값을 사용하여 미디어 쿼리를 포함하는 방법도 있습니다.

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

그리고 이것은 문제를 잘 해결한다.

아프로디테가 도와줄 수 있어

다음은 예를 제시하겠습니다.

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>
  );
}

JSX JS indicatorContainerProps:{ position: 'fixed', right: '0px', bottom: '0%', marginBottom: '40%', display:'flex', justifyContent:'center', flexDirection:'row', alignItems:'center', "@media (orientation:landscape)": { marginBottom: '0px' }

const styles = (window.innerWidth > window.innerHeight) ? {
    header: {
        display: 'flex',
        justifyContent: 'center',
    },
    body: {
        boxShadow: '0px 0px 5px black',
        display: 'flex',
        justifyContent: 'center',
        flexDirection: 'column'
    }
} : {
    // other styles
}

스타일에 이 구문을 사용할 수 있습니다.

의존 관계 없음 후크 솔루션 드롭서버 측에서 렌더링된 Nextj와 함께 작동합니다.

const useQuery = (query: string) => {
  const [matches, setMatches] = useState(false)

  const handleChange = (e) => setMatches( e.matches )

  useEffect(() => {
    const m = window.matchMedia(query)

    setMatches(m.matches)
    
    m.addEventListener('change', handleChange);

    return () => {
      m.removeEventListener('change', handleChange);
    }
  }, []);

  return !matches;
}

const Menu= () => {
  const isMobile = useQuery("(min-width: 768px)");
  ...
}

클래스 자체를 미디어 쿼리에 넣고 해당 쿼리에서 변경해야 할 항목만 변경하는 경우:

.heading {
   text-align: right;
   width: 360px;
   height: fit-content;
   padding: 10px 0px;
   box-shadow: 1px 3px 2px 0px rgb(206, 117, 1);
   display: flex;


/* media queries */

@media (max-width: 767px) {
.heading{
   text-align: center;
}
}

@media (max-width: 400px) {    
.heading{
   text-align: left;
}
}

언급URL : https://stackoverflow.com/questions/54491645/media-query-syntax-for-reactjs