Webdesign a gyakorlatban

www.topschool.hu

Az RWD olyan webdesign megközelítés, amelynek célja, hogy a weboldal vizuális elrendezése a lehető legoptimálisabb legyen a lehető legtöbb eszközön

Ezt a következő technikákkal valósítják meg: Fluid Grid rendszer CSS3 media lekérések (@media) Rugalmas képek, amelyek mérete valamilyen

relatív érték alapján számítódik Szerveroldali komponensek, amelyek

tehermentesítik a „smart” eszközöket

www.topschool.hu

Ethan Marcotte: http://alistapart.com/article/fluidgrids

Alapja em (kvirt) mértékegység. Eredetileg az adott betűtípus nagybetűs „M" szélességéhez igazodik. Gyakorlatban 1 em = 16 px

Mindent át kell számolni a következő képlet alapján:Tartget ÷ Context = ResultvagyTartget ÷ Context = Result * 100 = %

www.topschool.hu

268 (target) / 988 (context) = 0.271255 * 100 = 27.1255 %

700 (target) / 988 (context) = 0.708502 * 100 = 70.8502 %

www.topschool.hu

Nem mindig az oldal szélessége!

www.topschool.hu

CSS 3-ban megjelent @media szabályok lehetővé teszik, hogy bizonyos szabályok csak bizonyos feltétek esetén rendelődjenek a HTML objektumokhoz

@media (min-width: 768px) and (max-width: 979px) {

.hidden-tablet {display: none !important;

}}-------------------------------<link rel="stylesheet" href="m.css" media="screen and (max-device-width: 480px)" />

www.topschool.hu

https://www.facebook.com/topschool.hu

www.topschool.hu