Mi az a reszponzív webdesign, és miért van rá szükség?

Előző

A blogokon és fórumokon időnként találkozom olyan fogalommal, mint a reszponzív webdizájn és az emberek, akik megkérdezik, mi az. Úgy döntöttem, hogy összefoglalom egy kicsit.

A Wikipédia úgy definiálja ezt a koncepciót, mint egy olyan dizájnt, amelynek segítségével "kiváló észlelés különböző eszközökön" érhető el. Magam sem értettem a megfogalmazást, mert úgy tűnik, kérdések merülnek fel.

A valóságban minden egyszerűbb: ez a kifejezés olyan webhelyek létrehozására vonatkozik, amelyek különböző eszközökön - széles monitoron, normál képernyőn, táblagépen és mobiltelefonon - eltérően jelennek meg.

Ugyanakkor az alkalmazkodóképességet nem szabad összetéveszteni sem az egyszerű gumis elrendezéssel, amelyben a DIV elrendezést úgy készítik el, hogy az oldal egyszerűen a kijelző szélességére nyúlik, sem a webhelyek mobil verzióinak létrehozásával, amelyek leggyakrabban egy külön aldomainben találhatók, mint például az m.vashsayt.ru.

A válaszkészséget elsősorban a megjelenítési felbontástól függően különböző CSS-tulajdonságok definiálják – a @media képernyő feltétel-hozzárendelése és a min-device-width, max-device-width css tulajdonságok használatával.

Íme egy példa a reszponzív oldal létrehozására szolgáló kódra – az 1200 pixeles felbontású normál monitoron és a 640 képpontos felbontású mobiltelefon kijelzőjén másként jelenik meg:

@media képernyő és (max. szélesség: 1200 px) { /* feltétel kezdete */

#fő { /* tartalom a bal oldalon lesz */ szélesség: 75%; balra lebeg;}

#sidebar { /* oldalsáv a jobb oldalon lesz */ szélesség: 25%; úszó: jobb;}

} /* feltétel vége */

@média képernyő és (max. szélesség: 640 képpont) { /* feltétel kezdete */

#main { /* tartalom a teljes képernyőre kiterjed */ szélesség: 100%; }

#sidebar { /* oldalsáv egy új sorból kerül elhelyezésre */ szélesség: 100; }

} /* végefeltételek */

Általánosságban elmondható, hogy ideje eldobni a régi módszereket, és abbahagyni a space tag használatát a html-ben, helyette váltani CSS-re és reszponzív technológiákra! A legfontosabb dolog az, hogy ne felejtse el ellenőrizni a webhely érvényességét))

Következő

Olvassa el tovabba:

• Miért van szükség fejlesztő szőnyegre Mire kell figyelni a választásnál
• Mi a hidroponika és miért van rá szükség?
• WordPress újralinkelés vagy miért van szükség YARP beépülő modulra
• Miért van szükség a tüdőröntgenre, és miben különbözik a fluorográfiától?
• Miért nem fordulnak meg a fotók az Instagramon?

---