Media queries

Question

Witam. Piszę z pytaniem o Media queries. Czy ktoś mógłby mi wytłumaczyć jak zrobić najprościej Media queries do responsywnej strony internetowej aby elementy były dostosowane pod każdy wymiar ekranu. Nie mogę tego pojąć.

Answer 1

Jeśli chcesz pod każdy rozmiar ekranu, to tak po prawdzie powinieneś unikać media queries, stosując zamiast tego automatyczne układanie przy pomocy grida i flexboxa. Przy takim podejściu media queries powinny służyć głównie do breakpointów.

Comments

A czy mógłbyś mi napisać prosty kod abym mógł zobaczyć jaka tego jest składnia?

---

Polecam Every Layout, nawet w wersji darmowej. Do tego poradnik do flexboxa oraz analogiczny do grida.

Answer 2

Jeśli chesz zrozumieć na dobry początek tak łopatologicznie, to załóżmy, że masz stronę.
Jej wygląd (nie treść) jest zależna w ogromnym stopniu od css.

Zakładając, że masz monitor 1920px full hd.
 

@media only screen and (max-width: 1600px) {
  body {
    .container {
       display: block
  }
}

Powyższy kod spowoduje, że dla mniejszego monitora (możesz oczywiście zmniejszyć okno przeglądarki lub w inspec tools w przeglądarce zmniejszyć viewport), to jest dla viewportu o szerokości 1600 i mniejszej .container będzie wyświetlał elementy jeden pod drugim.

Wedle tej logiki dostosowuje się stronę dla wszelkich rozdzielczości (możesz poszukać w necie jakie breakpointy są najbardzie popularne dla urządzeń). Czyli np.
 

@media only screen and (max-width: 1280px) {
}
@media only screen and (max-width: 960px) {
}
@media only screen and (max-width: 480px) {
}

Jedna z kluczowych rzeczy: dla szerszych ekranów często ustawia się elementy jeden obok drugiego (np display: inline-block),
dla węższych ekranów spadają jeden pod drugi (display: block). Jednak w praktyce zwykle do tego używa się css flexbox lub css grid.
Dla wymienionych breakpointów zmieniają się też wielkość czcionek, marginesy i wszystko co niezbędne, żeby strona wyglądała dobrze dla danego zakresu rozdzielczości.
Niektóre elementy można całkowicie ukryć (display none), a inne pokazać w ich miejsce itp.
Media queries można oczywiście dostosować, w powyższym przykładzie np "@media only screen and (max-width: 1280px)" css będzie aplikowany dla wszystkich rodzielczości od 1280px i poniżej aż do "zera" dopóki nie zostanie nadpisane jakimś stylem. Analogicznie min-width działa odwrtonie, od podanej rozdzielczości dla wszystkich wzwyż.

Jednak można stworzyć też takie media query:
 

@media (min-width: 600px) and (max-width: 1280px) {
}

który zaaplikuje css dla ekranów o szerokości od 600 do 1280 i nie będzie miało efektu na niżesz ani na wyższe rozdzielczości.
Rekomendowaną metodą jest zaczynać projektowanie od telefonów (mobile-first), tzn używać głównie min-width media queries, a dla szerszych rozdzielczości dostosowywać później, ale jeśli wolisz najpierw zaprojektować na desktop, a później dostosowywać dla węższych rozdzielczości, to pewnie nie grzech.

Comments

.container będzie wyświetlał elementy jeden pod drugim.

AFAIK, ustawienie css

.container {
    display: block;
}

tyczy się tylko elementu o klasie .container i najczęściej jest to element div, który domyślnie i tak posiada właściwość css display: block.

Chyba chodziło Tobie o

  .container {
    display: flex;
    flex-direction: column;
  }

 

Sprawdź

<style>
  .container1 {
    display: block;
  } 
</style>

<div class="container1">
  <span>Lorem</span>
  <span>Lorem</span>
</div>

<hr>

<style>
  .container2 {
    display: block;
  }
  .container2 span {
    display: block;
  }  
</style>

<div class="container2">
  <span>Lorem</span>
  <span>Lorem</span>
</div>

<hr>

<style>
  .container3 {
    display: flex;
    flex-direction: column;
  } 
</style>

<div class="container3">
  <span>Lorem</span>
  <span>Lorem</span>
</div>