Ik ben zelf nooit zo van de boeken, naar mijn ervaring lopen deze vaak achter en je krijgt enkel de mening van de auteur mee terwijl je beter kunt begrijpen wat je doet zodat je zelf overwegingen kunt maken.
In principe is een responsive design ontzettend simpel. Er wordt hierboven gesteld dat er geen "magisch stukje code" is dat een design responsive maakt. Zoiets eenvoudigs als de pseudo code van Croga is er uiteraard niet maar je kunt wel kijken naar de door bille eerder genoemde Media Queries.
Een responsive design is in basis niets anders dan het toepassen van een ander set CSS eigenschappen op elementen wanneer de 'viewport' aan bepaalde eisen voldoet. Deze eisen worden bepaald dmv een media query. Bijv. het volgende stukje code zal bij een scherm dat minder dan 500px breed is een rode achtergrond tonen, anders een groene.
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
| body {
background-color: green;
}
@media only screen and (max-width:500px){
body {
background-color: red;
}
} |
Alle eigenschappen binnen de accolades van de media query worden enkel toegepast (en overschrijven in dit geval de eigenschappen buiten de media query omdat de eigenschappen binnen de media query
specifieker zijn.) wanneer de viewport voldoet aan de query. In dit geval worden de eigenschappen alleen toegepast wanneer sprake is van een normaal browserscherm (screen) en niet
bijv. een printje of een hulpmiddel voor slechtzienden. Verder moet het scherm niet breder zijn dan 500px.
Zoals je hieruit waarschijnlijk al begrijpt kun je van bijv. de media query
@media only print { } gebruik maken om elementen zoals je header en menu te verbergen (eigenschap
display: none;) wanneer iemand de pagina gaat uitprinten.
Ik kan mij voorstellen dat het erg lastig is om met een kant en klaar template de CSS te doorgronden en bewerken, dit is tegenwoordig extra lastig omdat er vaak ook nog eens gebruik wordt gemaakt van zogenaamde css frameworks. Ik wil je eigenlijk aanraden om zelf eens met CSS aan de slag te gaan. Probeer vanuit scratch een template in elkaar te zetten.
Beginnerstip: Blijf van
position: absolute; af totdat je precies weet wat het doet.
[
Voor 6% gewijzigd door
Joolee op 18-12-2013 09:57
]
:strip_icc():strip_exif()/u/265468/snor.jpg?f=community)
:strip_exif()/u/343403/avatar.gif?f=community){kind=avatar}
/u/122621/crop55c7668cf1772_cropped.png?f=community)
:strip_exif()/u/26632/dosprompt2.gif?f=community)
/u/38782/crop6146c7a29805d_cropped.png?f=community)
:strip_icc():strip_exif()/u/99644/crop5656ce361bedf_cropped.jpeg?f=community)
/u/9258/killbill.png?f=community)
:strip_exif()/u/27216/bosmonster_dropdown.gif?f=community)
:strip_exif()/u/147595/avaterTZ.gif?f=community)
:strip_exif()/u/12408/dm_u_judi.gif?f=community)
) dan iets van een "position-absolute-hell". Die laatste moet ik nog voor het eerst zien./u/249525/DoomSSG.JPG?f=community)
/u/291941/crop61880fced5227_cropped.png?f=community)
:strip_exif()/u/287167/crop67439a339b375_cropped.webp?f=community)
/u/472684/crop5eaea9fedd56a_cropped.png?f=community)