Download - Webdesin responsive
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
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