Tại sao thứ tự của các truy vấn phương tiện lại quan trọng trong CSS?

Question 1

Cuối cùng, tôi đã thiết kế các trang web đáp ứng tốt hơn và tôi thường xuyên sử dụng các truy vấn phương tiện CSS. Một mô hình mà tôi nhận thấy là thứ tự mà các truy vấn phương tiện được xác định thực sự quan trọng. Tôi đã không thử nghiệm nó trên mọi trình duyệt mà chỉ trên Chrome. Có lời giải thích cho hành vi này không? Đôi khi, thật khó chịu khi trang web của bạn không hoạt động như bình thường và bạn không chắc đó là truy vấn hay thứ tự mà truy vấn được viết.

Đây là một ví dụ:

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

Tuy nhiên, nếu cuối cùng tôi viết truy vấn cho 1024x600, trình duyệt sẽ bỏ qua nó và áp dụng giá trị lề được chỉ định trong phần đầu của 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;}
}

Nếu hiểu biết của tôi về các truy vấn phương tiện là đúng, thứ tự sẽ không thành vấn đề, nhưng có vẻ như nó đúng. Điều gì có thể là lý do?

Question 2

Đó là thiết kế của CSS - Cascading Style Sheet.

Có nghĩa là, nếu bạn áp dụng hai quy tắc xung đột cho cùng một phần tử, nó sẽ chọn cái cuối cùng đã được khai báo, trừ khi cái đầu tiên có !importantđiểm đánh dấu hoặc cụ thể hơn (ví dụ: html > bodyso với chỉ body, cái sau ít cụ thể hơn).

Vì vậy, với CSS này

@media (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

nếu cửa sổ trình duyệt rộng 350 pixel, nền sẽ có màu xanh lam, trong khi với CSS này

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

và cùng chiều rộng cửa sổ, nền sẽ có màu đỏ. Cả hai quy tắc thực sự phù hợp, nhưng quy tắc thứ hai là quy tắc được áp dụng vì là quy tắc cuối cùng.

Cuối cùng, với

@media (max-width: 400px) {
  body {
    background: blue !important;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

hoặc là

@media (max-width: 400px) {
  html > body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

nền sẽ có màu xanh lam (với cửa sổ rộng 350 pixel).

Question 3

Hoặc bạn có thể chỉ thêm chiều rộng tối thiểu vào / ies truy vấn phương tiện lớn hơn và không có bất kỳ vấn đề nào, bất kể thứ tự.

@media (min-width: 400.1px) and (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

Mở rộng đoạn mã

Sử dụng mã này, theo bất kỳ thứ tự nào, màu nền sẽ luôn là màu đỏ đối với độ phân giải có chiều rộng 400,1px-600px và sẽ luôn có màu xanh lam đối với độ phân giải có chiều rộng từ 400px trở xuống.