responsive web design. computer electronics

RWD - dopasowanie do telefonów komórkowych i tabletów

Tagi: Bootstrap, CSS3, HTML5, RWD, strona internetowa

Maciej Skrzypczak

WordPress / Responsive Developer

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: xl (od 1200px), lg (od 922px), md (od 768px), sm (od 576px):

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

Sortowanie kolejności bloków w zależności od rozdzielczości, polecenie 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){
}


Klienci

  • play
  • plk
  • rzeczpospolita
  • uniwersytet-warszawski
  • uniwersytet-adama-mickiewicza
  • termy-maltanskie
  • ferguson
  • unitra
  • parkiet
  • ekiosk
  • urzad-dozoru-technicznego
  • globalpack
  • bong
  • enveloper
  • bestpharma
  • caselogic
  • marumi
  • qualitysolicitors
  • slik
  • dupont-tyvek
  • sigma
  • propac
  • safebag
  • espeo
  • dalpo
  • digimania
  • profes
  • fregata
  • stilnovisti
  • laszkiewicz
  • ipgo
  • gusmahome
  • oltravel
  • wdf
  • mgfinance
  • stage-vision
  • tam-pol
  • aisens
  • artbanking
  • business-profile
  • convertis
  • daderman
  • eureka-finance
  • kalejdoskop
  • monika-photolife
  • north-translations
  • fhmdk
  • dco
  • hotel-poznanski
  • psco
  • pakawie
  • galantex
  • michal-sokolski
  • wersalia
  • sight
  • airtaxi
  • eureka-tax
  • whisky