장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하는 방법은 무엇입니까?
7180 단어 css
장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하려면
@media의 미디어 쿼리 구문을 사용한 다음 min-width 구문을 작성하여 스타일의 최소 너비를 정의해야 합니다. 적용된 후 and라는 키워드를 작성한 다음 max-width 구문을 작성하여 최대 너비를 정의하여 CSS 스타일이 적용되지 않도록 합니다.따라서 CSS 스타일은 특정 너비 범위(최소 및 최대 너비)에만 적용됩니다.
TL; DR
<html>
<body>
<p>Hello World!</p>
</body>
<!-- CSS styles for the `body` and `p` tag -->
<!--
Using the `min-width` and `max-width` breakpoints
to set the minimum and maximum width range
-->
<style>
body {
background-color: white;
}
p {
color: red;
}
@media (min-width: 600px) and (max-width: 800px) {
body {
background-color: black;
}
p {
color: white;
}
}
</style>
</html>
예를 들어
body의 배경색이 white이고 단락 텍스트의 색상이 red인 웹 페이지가 있다고 가정해 보겠습니다.HTML 및 CSS 코드는 다음과 같습니다.
<html>
<body>
<p>Hello World!</p>
</body>
<!-- CSS styles for the `body` and `p` tag -->
<style>
body {
background-color: white;
}
p {
color: red;
}
</style>
</html>
위의 스타일을 사용한 웹페이지의 시각적 표현은 다음과 같습니다.
이제 장치 너비가
body 이상이고 너비가 black 표시에 도달할 때까지 웹 페이지white 배경색을 600px로 변경하고 단락 텍스트 색상을 800px로 변경하는 것을 목표로 합니다. 따라서 600px 표시는 CSS 스타일이 트리거되는 최소 너비이고 800px는 CSS 스타일이 트리거되어야 하는 최대 너비입니다.이를 위해
@media synxtax, (min-width: 600px) 구문, keyowrdand, (max-width: 800px) 구문을 사용할 수 있습니다.이 블록 안에 CSS 스타일을 작성하여 웹페이지 배경색을
black로, 단락 텍스트 색상을 white로 변경할 수 있습니다.다음과 같이 할 수 있습니다.
<html>
<body>
<p>Hello World!</p>
</body>
<!-- CSS styles for the `body` and `p` tag -->
<!--
Using the `min-width` and `max-width` breakpoints
to set the minimum and maximum width range
-->
<style>
body {
background-color: white;
}
p {
color: red;
}
@media (min-width: 600px) and (max-width: 800px) {
body {
background-color: black;
}
p {
color: white;
}
}
</style>
</html>
아래는 장치 화면의 최소 너비가
600px 표시에서 800px 표시까지 일치할 때만 트리거되는 CSS 스타일의 시각적 표현입니다.
codesandbox에 있는 위의 코드를 참조하십시오.
그게 다야 😃.
이 정보가 유용하다고 생각되면 자유롭게 공유하세요 😃.
Reference
이 문제에 관하여(장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하는 방법은 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/melvin2016/how-to-change-the-webpage-css-styles-when-the-device-width-is-above-certain-width-and-below-certain-width-b5e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
