Hogy lehet reszponzív design-t készíteni?

Nagy divat lett ez a reszponzív design mostanában...

Igazából arra kell leginkább figyelni, hogy ahol átméretezést akarunk, ott ne pixeleket, hanem %-ot használjunk.

Ez nagyon hülye megfogalmazás, de innen már ki tudsz indulni.

Aztán meg persze nem ártana a különböző media query használatok sem, ahol az egyes képernyő méretekre lehet megadni külön formázásokat.

nem kell ide semmi mas csak egy meta tag a head reszbe.

<meta name="viewport" content="width=device-width, user-scalable = no"/>

Nem csak az a meta tag kell, és nem feltétlenül csak %-al lehet megcsinálni és nem csak divat. Hanem...

Az elrendezés és a design a kijelzőfelbontástól változik.

Amilyen felbontásokra akarsz tervezni, azokat írod be CSS-be.

A következő példában monitoron 960 px a content osztály, középre helyezve, tableten (768 px és 959 px közötti felbontáson) 760 px. Telefonon (768 px felbontás alatt) pedig 100% hosszúságú a szöveget középre igazítva. A szöveg színe monitoron piros, alatta kék.

.content {

width: 960px;

margin: auto;

color: #f00;

}

@media only screen and (min-width: 768px) and (max-width: 959px) {

.content {

width: 760px;

color: #00f;

}

}

@media only screen and (max-width: 767px) {

.content {

width: 100%;

text-align: center;

}

}

Röviden, ha egy felbontáson változtatni akarsz valamit, akkor azt a megfelelő helyre beírod, ami nincs beírva, az marad ugyanolyan.

Vagy alkalmazz valamilyen reszponzív gridet.

[link]

Adnak az oldalnak egy szélességet, pl 960 px, azt felosztják 12, 16, vagy valamennyi oszlopra, a div-hez hozzáadják a megfelelő class-okat és akkor az oszlopok széleihez igazodik. Ha ilyen keretrendszert használsz, akkor a designt is úgy kell tervezni.

De tölts le egyet, nézd meg a CSS fájlt és jobban megérted.

Sokan azt hiszik, hogy annyit jelent a responsive webdesign, hogy méretre szabják a viewportot és nagyyítanak-kicsinyítenek...

És most nem csak a 960 grid systemről beszélek (ezek tök alapok), hanem még jó néhány más apróságról. Mind megjelenéshez, mind használathoz, mind sok mindenhez még több kell ahhoz, hogy tényleg frankó legyen legyen.