CSS에서 미디어 쿼리의 순서가 중요한 이유는 무엇입니까?
최근에 저는 더 반응이 빠른 사이트를 디자인하고 있으며 CSS 미디어 쿼리를 자주 사용하고 있습니다. 내가 알아 차린 한 가지 패턴은 미디어 쿼리가 정의되는 순서가 실제로 중요하다는 것입니다. 모든 브라우저에서 테스트하지는 않았지만 Chrome에서만 테스트했습니다. 이 동작에 대한 설명이 있습니까? 사이트가 제대로 작동하지 않고 쿼리인지 또는 쿼리가 작성된 순서인지 확실하지 않을 때 때때로 실망스러워집니다.
예를 들면 다음과 같습니다.
HTML
<body>
<div class="one"><h1>Welcome to my website</h1></div>
<div class="two"><a href="#">Contact us</a></div>
</body>
CSS :
body{
font-size:1em; /* 16px */
}
.two{margin-top:2em;}
/* Media Queries */
@media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1024x600*/
@media (max-height: 600px) {
.two{margin-top:4em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}
}
그러나 마지막에 1024x600에 대한 쿼리를 작성하면 브라우저가이를 무시하고 CSS 시작 부분에 지정된 여백 값 (margin-top : 2em)을 적용합니다.
/* Media Queries - Re-arranged version */
@media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}
}
/*1024x600*/
@media (max-height: 600px) {
.two{margin-top:4em;}
}
미디어 쿼리에 대한 나의 이해가 정확하다면 순서는 중요하지 않지만 그렇게하는 것 같습니다. 이유가 무엇일까요?
That's by design of CSS — Cascading Style Sheet.
It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker or is more specific (e.g. html > body vs just body, the latter is less specific).
So, given this CSS
@media (max-width: 600px) {
body {
background: red;
}
}
@media (max-width: 400px) {
body {
background: blue;
}
}
if the browser window is 350 pixels wide, the background will be blue, while with this CSS
@media (max-width: 400px) {
body {
background: blue;
}
}
@media (max-width: 600px) {
body {
background: red;
}
}
and the same window width, the background will be red. Both rules are indeed matched, but the second one it's the one that is applied because is the last rule.
Finally, with
@media (max-width: 400px) {
body {
background: blue !important;
}
}
@media (max-width: 600px) {
body {
background: red;
}
}
or
@media (max-width: 400px) {
html > body {
background: blue;
}
}
@media (max-width: 600px) {
body {
background: red;
}
}
the background will be blue (with a 350 pixels wide window).
Or you could just add min-width to the bigger media query/ies and not have any issues, regardless of the order.
@media (min-width: 400.1px) and (max-width: 600px) {
body {
background: red;
}
}
@media (max-width: 400px) {
body {
background: blue;
}
}Using this code, in any order, the background-color will always be red for resolutions with a width of 400.1px-600px, and will always be blue for resolutions with a width of 400px or less.
참고URL : https://stackoverflow.com/questions/8790321/why-does-the-order-of-media-queries-matter-in-css
'development' 카테고리의 다른 글
| 자세한 가비지 컬렉션 출력을 파일로 리디렉션하는 방법은 무엇입니까? (0) | 2020.11.07 |
|---|---|
| C ++로 콘솔의 텍스트 색상 지정 (0) | 2020.11.07 |
| E : gnupg, gnupg2 및 gnupg1이 설치되지 않은 것 같지만이 작업을 수행하려면 둘 중 하나가 필요합니다. (0) | 2020.11.07 |
| 유용한 (어려운) SQL 스크립트 라이브러리 (0) | 2020.11.07 |
| Hibernate를 사용한 Spring Security 3 데이터베이스 인증 (0) | 2020.11.07 |