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

Cuối năm, tôi đã thiết kế các trang web phản hồi nhanh 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ẫu mà tôi nhận thấy là thứ tự 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ó trong mọi trình duyệt, nhưng chỉ trên Chrome. Có một lời giải thích cho hành vi này? Đôi khi nó trở nên bực bội khi trang web của bạn không hoạt động như nó nên và bạn không chắc chắn nếu đó là truy vấn hoặc thứ tự mà truy vấn được viết.Tại sao thứ tự truy vấn phương tiện lại quan trọng trong CSS?

Dưới đâ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 tôi đã viết các truy vấn cho 1024x600 trong ngoái, trình duyệt sẽ bỏ qua và áp dụng giá trị ký quỹ được chỉ định trong phần bắt đầ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ề truy vấn phương tiện là chính xác, thứ tự không quan trọng, nhưng có vẻ như vậy. Điều gì có thể là lý do?

Nguồn

2012-01-09 dsignr

Đó là theo thiết kế của CSS - Kiểu xếp tầng. Điều này có nghĩa là, nếu bạn áp dụng hai quy tắc va chạm với cùng một yếu tố, nó sẽ chọn quy tắc cuối cùng được khai báo, trừ trường hợp đầu tiên có dấu hiệu !important hoặc cụ thể hơn (ví dụ: html > body và chỉ body, sau đó là ít cụ thể hơn).

Vì vậy, cho CSS

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

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

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

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

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

và chiều rộng cùng một cửa sổ, nền sẽ có màu đỏ. Cả hai quy tắc đều 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

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

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

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

Nguồn

2012-01-09 16:58:46

Cảm ơn bạn. Tôi không bao giờ tưởng tượng ra một logic đơn giản như vậy sẽ làm hỏng giấc ngủ của tôi trong đêm với nhau. Cảm ơn. – dsignr

Trong một biểu định kiểu nếu các quy tắc tương tự được áp dụng mà không có bất kỳ truy vấn phương tiện nào và sau đó trong truy vấn phương tiện cho các thiết bị di động màn hình nhỏ và có một số hình ảnh tải xuống. Vì vậy, những gì sẽ xảy ra, trình duyệt sẽ bỏ qua các quy tắc mà không có truy vấn phương tiện và chỉ áp dụng các quy tắc truy vấn phương tiện cụ thể không? –

Hoặc bạn chỉ có thể thêm chiều rộng tối thiểu vào 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; 
 
    } 
 
}

Sử dụng mã này, trong bất kỳ thứ tự, background-color sẽ luôn luôn có màu đỏ cho độ phân giải có chiều rộng 400.1px-600px, và sẽ luôn luôn là màu xanh cho độ phân giải có chiều rộng có kích thước 400px trở xuống.

Nguồn

2014-11-06 15:58:26

Đẹp! Cảm ơn bạn. – dsignr

Tôi cringe ở tầm nhìn của một giá trị như 400.1px trong CSS. Hoặc 1023px, 1025px v.v. – Monstieur

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

Trả lời

Các vấn đề liên quan