Tôi đang cố gắng sử dụng các truy vấn phương tiện CSS3 để tạo một lớp chỉ xuất hiện khi chiều rộng lớn hơn 400px và dưới 900px. Tôi biết điều này có lẽ cực kỳ đơn giản và tôi đang thiếu một cái gì đó rõ ràng, nhưng tôi không thể tìm ra nó. Những gì tôi đã đưa ra là mã dưới đây, đánh giá cao bất kỳ trợ giúp.
@media (max-width:400px) and (min-width:900px) {
.class {
display: none;
}
}
Câu trả lời:
Bạn cần chuyển đổi giá trị của mình:
/* No greater than 900px, no less than 400px */
@media (max-width:900px) and (min-width:400px) {
.foo {
display:none;
}
}
Bản trình diễn: http://jsfiddle.net/xf6gA/ (sử dụng màu nền, để dễ xác nhận hơn)
@Jonathan Sampson Tôi nghĩ rằng giải pháp của bạn là sai nếu bạn sử dụng nhiều @media .
Bạn nên sử dụng ( chiều rộng tối thiểu trước ):
@media screen and (min-width:400px) and (max-width:900px){
...
}andsau đó @media screen. Chèn cái đầu tiên andcố định này cho tôi.
chỉ muốn để lại .scssví dụ của tôi ở đây, tôi nghĩ rằng đó là cách thực hành tốt nhất, đặc biệt tôi nghĩ rằng nếu bạn tùy chỉnh nó sẽ tốt để đặt chiều rộng chỉ một lần! Thật không thông minh khi áp dụng nó ở mọi nơi, bạn sẽ tăng yếu tố con người theo cấp số nhân.
Tôi mong chờ phản hồi của bạn!
// Set your parameters
$widthSmall: 768px;
$widthMedium: 992px;
// Prepare your "function"
@mixin in-between {
@media (min-width:$widthSmall) and (max-width:$widthMedium) {
@content;
}
}
// Apply your "function"
main {
@include in-between {
//Do something between two media queries
padding-bottom: 20px;
}
}.class {
display: none;
}
@media (min-width:400px) and (max-width:900px) {
.class {
display: block; /* just an example display property */
}
}
max-widthvàmin-widthnên được đảo ngược. cách này dễ đọc hơn