사용자가 장치 방향을 가로로 변경할 때 웹 페이지 CSS 스타일을 변경하는 방법은 무엇입니까?

6257 단어 css
Originally posted here!

사용자가 장치 방향을 '가로'로 변경할 때 웹 페이지 CSS 스타일을 변경하려면 미디어 쿼리 구문@media 뒤에 () 기호(여는 괄호와 닫는 괄호)를 사용하고 괄호 안에 다음과 같이 작성할 수 있습니다. orientation라는 키워드 다음에 : 기호(콜론), landscape라는 키워드가 있어 사용자가 방향을 가로로 변경할 때 모드를 설정합니다.
() 기호 다음에 {} 기호(열고 닫는 중괄호)를 사용하고 장치의 방향이 가로 방향으로 변경될 때 적용해야 하는 스타일을 정의할 수 있습니다.

TL;DR




<html>
  <body>
    <p>Hello World</p>
  </body>

  <!-- CSS styles for the body and the paragrapgh tags -->
  <!-- 
    @media syntax and the `landscape` orientation syntax 
    to change styles when the user changes orientation
  -->
  <style>
    body {
      background-color: black;
    }

    p {
      color: white;
    }

    @media (orientation: landscape) {
      body {
        background-color: white;
      }

      p {
        color: black;
      }
    }
  </style>
</html>


예를 들어 body의 배경색이 black이고 paragraph 텍스트의 색이 기본적으로 흰색인 웹 페이지가 있다고 가정해 보겠습니다.

<html>
  <body>
    <p>Hello World</p>
  </body>

  <!-- CSS styles for the body and the paragraph tags -->
  <style>
    body {
      background-color: black;
    }

    p {
      color: white;
    }
  </style>
</html>


웹페이지는 위의 스타일로 다음과 같이 보일 것입니다.



사용자가 장치의 방향을 white 모드로 변경할 때 본문의 배경색을 paragraph로, white 텍스트 색상을 landscape로 변경하는 것을 목표로 합니다.

이를 위해 @media 규칙 다음에 (orientation: landscape) 구문을 사용하여 스타일을 트리거할 수 있습니다.

다음과 같이 할 수 있습니다.

<html>
  <body>
    <p>Hello World</p>
  </body>

  <!-- CSS styles for the body and the paragrapgh tags -->
  <!-- 
    @media syntax and the `landscape` orientation syntax 
    to change styles when the user changes orientation
  -->
  <style>
    body {
      background-color: black;
    }

    p {
      color: white;
    }

    @media (orientation: landscape) {
      body {
        background-color: white;
      }

      p {
        color: black;
      }
    }
  </style>
</html>


이제 사용자가 이러한 방식으로 뷰포트 방향, 너비 또는 높이를 변경하면 그에 따라 웹페이지 CSS 스타일이 교환됩니다.

다른 뷰포트 너비에서 변경되는 CSS 스타일의 표현은 다음과 같습니다.

Webpage changes styles when the viewport width is changed

그게 다야 😃.

codesandbox 에서 위의 코드 라이브를 참조하십시오.

이 정보가 유용하다고 생각되면 자유롭게 공유하세요 😃.

Unity3D용 Android의 MP3 파일
SDL2 및 Odin 프로그래밍 언어를 사용한 플레이어 이동 -- Space Shooter Game - Part 3 -

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage