Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]RWD - dublowanie kodu CSS
Forum PHP.pl > Forum > Przedszkole
wujek2009
Cześć

W jaki sposób nie dublować kodu CSS w tagach media queries? Załóżmy, że chce coś globalnie ustawić (np. dla IMG), więc nie chce za każdym razem pisać tego samego dla każdego MQ dla osobnej rozdzielczości? Mam taki kod:
  1. @media screen and (max-width: 1200px) {
  2.  
  3. }
  4.  
  5. @media screen and (max-width: 980px) {
  6.  
  7. }
  8.  
  9. @media screen and (max-width: 750px) {
  10.  
  11. }
  12.  
  13. @media screen and (max-width: 540px) {
  14.  
  15. }
  16.  
  17. @media screen and (max-width: 380px) {
  18.  
  19. }


Więc mogę tutaj zastosować bramkę AND i pisać dla wszystkich rozdzielczości? (@media screen and (max-width: 380px) and (max-width: 540px) and (...)) ?
Oraz dodatkowe pytanie: w sieci znalazłem kilka rozdzielczości - ale czy dla każdej muszę tworzyć indywidualnie czy po prostu mogę ułożyć styl dla np. 980 a dla reszty się już dostosuje kod? W końcu będę operował na wysokości/szerokości elementu podawanej w procentach - czy jednak coś pominąłem?
IceManSpy
Możesz wykorzsytać LESS lub SASS (SCSS). Dzięki temu możesz zdefiniować sobie parę zmiennych lub nawet jakiś podstawowych schematów a potem wykrozsytywać je w wielu miejscach (coś jak definicja funkcji, a potem wykorzystywanie jej)

Jak nauczysz się z niego korzystać to będziesz potem wniebowzięty jak fajnie można pisać CSSy smile.gif
Crozin
Skoro chcesz mieć jakieś style niezależne od rozdzielczości to dlaczego nie wstawisz ich po prostu poza jakikolwiek blok @media?
com
dokładnie tak jak napisał Crozin ustawienia globalne czy to jest RWD czy tez nie zawsze definiuje się tak samo, RWD konkretyzuje Ci do dla danego ekranu wiec nie ma sensu tego tam wrzucać skoro ma działać tak samo dla wszystkich wink.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.