(điều này có thể đã được trả lời - không thể tìm thấy câu trả lời)Có lợi thế trong việc nhóm các truy vấn phương tiện css với nhau không?
Ghi đè truy vấn @media truyền thống có xu hướng nhóm tất cả ghi đè cho một kích thước/phương tiện trong cùng một nhóm khung.
ví dụ:
.profile-pic {
width:600px;
}
.biography {
font-size: 2em;
}
@media screen and (max-width: 320px) {
.profile-pic {
width: 100px;
float: none;
}
.biography {
font-size: 1.5em;
}
}
Trong Sass, có một cách thực sự tiện lợi để viết @media ghi đè truy vấn trong việc kê khai lồng nhau, như vậy:
.profile-pic {
width:600px;
@media screen and (max-width: 320px) {
width: 100px;
float: none;
}
}
.biography {
font-size: 2em;
@media screen and (max-width: 320px) {
font-size: 1.5em;
}
}
bây giờ, khi biên soạn, sass không nhóm truy vấn @media khối với nhau, vì vậy sản lượng kết thúc lên được một cái gì đó như thế này:
.profile-pic {
width:600px;
}
@media screen and (max-width: 320px) {
.profile-pic {
width: 100px;
float: none;
}
}
.biography {
font-size: 2em;
}
@media screen and (max-width: 320px) {
.biography {
font-size: 1.5em;
}
}
tôi đã sử dụng kỹ thuật này cho một dự án gần đây và khi bạn áp dụng nguyên tắc đó để một dự án lớn hơn nhiều bạn kết thúc với mu ltiple @media phần truy vấn phổ biến trong suốt css của bạn (tôi đã có khoảng 20 cho đến nay).
Tôi khá thích kỹ thuật sass vì nó giúp dễ dàng theo dõi luồng ghi đè (và cũng giúp di chuyển mọi thứ dễ dàng hơn).
Tuy nhiên, tôi tự hỏi liệu có bất kỳ bất lợi nào trong việc có nhiều phần @media thông qua CSS, đặc biệt là hiệu suất khôn ngoan không?
Tôi đã thử trình thu thập css chrome nhưng tôi không thể thấy bất kỳ điều gì cụ thể cho truy vấn @media.
(More info on @media in sass on this page)
Cảm ơn bạn đã tham khảo này, đó là tại chỗ trên. Nice tìm. Đã thử nghiệm truy vấn 2000 lần nhiều lần trên Chrome trên iPhone 4s và dường như không có bất kỳ sự khác biệt đáng kể nào .. – Ben