• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Media queries

Object Storage Arubacloud
+2 głosów
132 wizyt
pytanie zadane 31 marca w HTML i CSS przez oleksik Użytkownik (610 p.)
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ąć.

2 odpowiedzi

+3 głosów
odpowiedź 31 marca przez Comandeer Guru (602,560 p.)

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.

komentarz 31 marca przez oleksik Użytkownik (610 p.)
A czy mógłbyś mi napisać prosty kod abym mógł zobaczyć jaka tego jest składnia?
1
komentarz 31 marca przez Comandeer Guru (602,560 p.)

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

0 głosów
odpowiedź 14 kwietnia przez avexperi Początkujący (440 p.)

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.

komentarz 15 kwietnia przez VBService Ekspert (254,490 p.)

.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>

 

Podobne pytania

0 głosów
2 odpowiedzi 532 wizyt
pytanie zadane 6 marca 2019 w HTML i CSS przez ricksanchez1943 Początkujący (260 p.)
0 głosów
4 odpowiedzi 423 wizyt
pytanie zadane 1 grudnia 2018 w HTML i CSS przez Piotr Jarema Użytkownik (970 p.)
0 głosów
0 odpowiedzi 163 wizyt
pytanie zadane 2 czerwca 2020 w HTML i CSS przez fiodoreq Nowicjusz (120 p.)

92,674 zapytań

141,578 odpowiedzi

320,046 komentarzy

62,038 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...