Zapytanie o media o minimalnej/maksymalnej szerokości nie ma znaczenia gramatycznego.

Question

Znajduję koncepcję zapytania o media (min-width/max-width), nieco mylące.

Oczywiście gdybym był zaprojektować kwerendę mediów byłoby chcę powiedzieć (w pseudo-kod) ....

if(screen.width < 420) 
{ 
    ApplyStyle(); 
} 

Ta koncepcja mówi o min i max nie ma żadnego sensu, ponieważ "min-width" czegoś takiego jak element div jest poleceniem, a nie pytaniem.

wiem, że prawdziwe są następujące gdy ekran spada poniżej 420px ...

@media screen and (max-width:420px) { 


} 

ja po prostu nie wiem dlaczego, ponieważ maksymalna szerokość jest coś powiem go mieć. Jeśli powiedziałem mu, żeby miał coś, czemu css to sprawdza? Na pewno to już wie.

Być może brakuje tu gramatyki/kontekstu. Czy ktoś może mi wyjaśnić?

Answer 1

min-width w zapytaniami mediów nie jest związana z właściwością min-width ustawionej na elementach, to są dwa różne rzeczy.

W zapytaniach o media min-width: X ma wartość true, jeśli okno robocze ma szerokość większą lub równą X, co oznacza, że ​​działa jako screen.width >= X.Oczywiście max-width będzie wówczas równa screen.width <= X

Dla mnie to ma sens, jeśli czytasz @media screen and (max-width:420px) jako ekran o maksymalnej szerokości 420px, więc coś od 0 do 420px

Answer 2

Oto prosty przykład, mam nadzieję, że to pomaga ..

że mamy stronę internetową z następującymi zapytaniami mediów:

/* #1- Large desktop */ 
@media (min-width: 980px) { ... } 

/* #2- Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { ... } 

/* #3- Landscape phone to portrait tablet */ 
@media (max-width: 767px) { ... } 

/* #4- Landscape phones and down */ 
@media (max-width: 480px) { ... } 

Jeśli rozmiar ekranu przeglądarce jest 1200 pikseli, zapytanie nr 1 zostanie spełniony, ponieważ minimalna szerokość przeglądarki musi wynosić 980px, aby można było wyświetlić to zapytanie.

Powiedzmy, że rozmiar przeglądarkę teraz, a to przyniesie całą drogę w dół do 250 pikseli .. Zapytanie nr 4 jest spełniony jako MAX jest 480px ..

Oto prosty tłumaczenie zapytań ..

@media (min-width: 980px) { ... } 

Wyświetlacz jeśli ekran jest większy niż lub równy 980px

@media (min-width: 768px) and (max-width: 979px) { ... } 

wyświetlaczu, jeśli ekran jest większy niż lub równy 768px i mniejsza lub równa 978px

@media (max-width: 767px) { ... } 

Wyświetlany, jeśli ekran jest większy niż 480 pikseli i mniejszy lub równy 767 pikseli.

@media (max-width: 480px) { ... } 

Wyświetlacz jeśli ekran jest mniejszy lub równy 480px

Korzystanie z tych zapytań, zawsze będziesz mieć wynik, jako jedno zapytanie jest zawsze zadowolony.

Answer 3

Zamieszanie jest to, że istnieje zarówno zapytania min-width właściwość CSS i media o tej samej nazwie:

@media (min-width: 420px) {...} /* This is read-only and is set to screen size */ 

.element { min-width: 420px; ...} /* This is setting a property of the selected element */