Kaskada sprawia, że ​​CSS jest wyjątkowy i potężny. Ale w przypadku zapytań o media nakładaj sięmogą wydają się problematyczne.

Rozważmy następujący CSS (kontynuacjazasady nakładania się zapytań o media CSS):

/* Standard - for all screens below 20em */

body { color: black; font-size: 1em; }

/* Query A - slightly wider, mobile viewport */

@media (min-width: 20em) and (max-width: 45em) {
    body { color: red; } /* supposed to be unique for this width */
}

/* Query B - everything else */

@media (min-width: 45em) {
    body { font-size: larger; } /* because viewport is bigger */
}

Więc kiedy ekran ma dokładnie 45em szerokości, nakładanie się na 45embędą traktowane zgodnie ze standardową kaskadą CSS:

Wszystkomax-width: 45em najpierw zostaną zastosowane definicje,i wszystkiemin-width: 45em zostaną zastosowane później.

Rozważ te dwa warunki:

Normalnie cały tekst byłbyblack, aleZapytanie A jest wyjątkowy i macolor: red.OdZapytanie B jest dla większych rzutni, ma tekst CSSfont-size: larger.

Dlatego też, na szerokości dokładnie 45em, otrzymalibyśmyduży i czerwony tekst. Jakie byłoby najlepsze rozwiązanie, aby tego uniknąć?

Widzę dwie możliwości:

Ponownie zadeklaruj tekstcolor: black wZapytanie B, ale wtedy zarządzasz dwiema deklaracjami, jeśli zdecydujesz się zmienićcolor w przyszłości. (Oczywiście, nie jest to taki problem z tą pojedynczą linią kodu, ale wyobraź sobie, że istnieje wiele innych deklaracji i selektorów.)

Unikaj nakładania się, używając wartości pikseli, takich jakmax-width: 799px imin-width: 800px, ale potem używasz pikseli - przypuszczam, że mogą to być odpowiednio 49.9375em i 50em. Co jednak, jeśli domyślnie nie jest już 16em i coś zostanie zaokrąglone? I gdziewciąż nie jestem pewien co dzieje się w tej luce. (Czarna dziura, która łamie kontinuum czasoprzestrzenne?)

Obie mają swoje wady ... inne pomysły?