RWD / responsywna strona internetowa
Tagi: Bootstrap, CSS3, HTML5, programowanie, RWD, strony www
iREBU Specjalista WordPress
Autor: Maciej Skrzypczak
WordPress / Hosting / Pozycjonowanie / Seo
Dopasowanie do telefonów komórkowych i tabletów.
Najwygodniej jest skorzystać z biblioteki Bootstrap (getbootstrap.com).
Przy jej pomocy stronę internetową dzielimy na 12 bloków, które tworzą kolumny, polecenie col. Podziału dokonujemy w zależności od rozdzielczości urządzenia na jakim zostaną one wyświetlone. Do wyboru mamy klasy typu:
- xxl (od 1400px),
- xl (od 1200px),
- lg (od 922px),
- md (od 768px),
- sm (od 576px).
Na przykład:
<div class="container">
<div class="row">
<div class="col-12 col-sm-8 col-md-8">
</div>
<div class="col-12 col-sm-4 col-md-3 offset-md-1">
</div>
</div>
</div>
Natomiast sortowanie kolejności bloków w zależności od rozdzielczości można wykonać poleceniem order:
<div class="container">
<div class="row">
<div class="col-6 col-sm-6 order-sm-2">
</div>
<div class="col-6 col-sm-6 order-sm-1">
</div>
</div>
</div>
Natomiast bezpośrednio w kodzie CSS3 typy mediów można dostosować przy pomocy media-query:
@media only screen and (min-width:992px) and (max-width:1199px){
}
POLECANE / WordPress i Bootstrap. Bezpłatnie i elastycznie
Więcej informacji można znaleźć na naszym kanale Facebook i Instagram.