창 또는 장치 너비가 특정 너비에 도달하면 CSS 스타일을 변경하는 방법은 무엇입니까?
6257 단어 css
창 또는 장치 너비가 특정 최소 너비에 도달할 때 CSS 스타일을 변경하려면
@media 미디어 쿼리 구문과 () 기호(여는 괄호 및 닫는 괄호)를 사용할 수 있습니다. 괄호 안에 키워드 min-width 다음에 : 기호(콜론)를 쓴 다음 너비와 단위를 쓸 수 있습니다.이 CSS 블록 안에 작성하는 CSS 스타일은 장치 또는 창 너비가 제공한 최소 너비와 일치하는 경우에만 트리거됩니다.
TL;DR
<html>
<body>
<p>Hello World!</p>
</body>
<!-- CSS styles -->
<!--
Using the `@media` and the `min-width` syntax
we can define the CSS styles only to be triggered
when the window or the device width reaches `1000px`.
-->
<style>
body {
background-color: black;
}
p {
color: white;
}
@media (min-width: 1000px) {
body {
background-color: white;
}
p {
color: black;
}
}
</style>
</html>
예를 들어
body의 배경색이 검은색이고 paragraph 텍스트가 기본적으로 설정된 웹 페이지가 있다고 가정해 보겠습니다.다음과 같이 보일 수 있습니다.
<html>
<body>
<p>Hello World!</p>
</body>
<!-- CSS styles -->
<style>
body {
background-color: black;
}
p {
color: white;
}
</style>
</html>
출력은 다음과 같습니다.
창 또는 장치 너비가
body 이상인 경우에만 이 웹 페이지의 white 배경색을 black로, 단락 텍스트 색상을 1000px로 변경하는 것을 목표로 합니다.이를 위해
@media 미디어 쿼리 구문 뒤에 () 대괄호 기호를 사용할 수 있습니다. 괄호 안에 (min-width: 1000px) 코드를 작성하여 창 너비가 1000px에 도달하거나 창의 최소 너비가 1000px 표시에 있을 때만 CSS 스타일을 트리거해야 한다고 정의할 수 있습니다.다음과 같이 할 수 있습니다.
<html>
<body>
<p>Hello World!</p>
</body>
<!-- CSS styles -->
<!--
Using the `@media` and the `min-width` syntax
we can define the CSS styles only to be triggered
when the window or the device width reaches `1000px`.
-->
<style>
body {
background-color: black;
}
p {
color: white;
}
@media (min-width: 1000px) {
body {
background-color: white;
}
p {
color: black;
}
}
</style>
</html>
적용되는 CSS 스타일의 시각적 표현은 아래와 같습니다.
이것은 창 너비 또는 장치 너비가 최소 너비에 도달했을 때 CSS 스타일을 변경하는 방법입니다.
codesandbox에 있는 위의 코드를 참조하십시오.
그게 다야 😃!
이 정보가 유용하다고 생각되면 자유롭게 공유하세요 😃.
Reference
이 문제에 관하여(창 또는 장치 너비가 특정 너비에 도달하면 CSS 스타일을 변경하는 방법은 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/melvin2016/how-to-change-the-css-styles-when-the-window-or-device-width-reaches-a-certain-width-62텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
