Mi az a rugalmas webdesign?

• Lehet 1, 2024

A reagáló webdizájn három fő jellemzője, amelyek folyékony elrendezések, átméretezhető képek és médialekérdezések. A médialekérdezések nem igazán újak a webdesignban. A médiatípusként kezdve a CSS2.1-ben stíluslapokat készíthetünk mind a webhez, mind a nyomtatáshoz, kissé biztosítva, hogy a weboldal ugyanolyan legyen a képernyőn és nyomtatáskor. Ez a CSS3 médialekérdezésekké fejlődött. Ez a lekérdezés ellenőrzi a médiaeszköz szélességét (maximális eszközszélesség), és összehasonlítja azt egy beállított értékkel, például 480px vagy 768px. Erre a lekérdezésre válaszul a CSS stílusokat használjuk a folyadék elrendezésének megváltoztatására és a képernyő képernyőképeinek átméretezésére.

Könnyen tesztelheti, hogy egy weboldal reagáló kialakítású-e. Kezdje a böngészővel a számítógép képernyőjének teljes szélességén. Ezután húzza a böngésző jobb szélét balra, hogy csökkentse a böngészőablak szélességét. Látnia kell, hogy a képek kisebbek lesznek, és az elrendezés elveszi a egymás mellett lebegő osztóelemeket, és függőlegesen egymásra rakja őket. Például, ha a galéria oldalán teljes képernyős soronként hat kép (hat os) van, a képernyő szélességének csökkentésével, a sorban lévő képek számát fokozatosan csökkentjük és egymásra rakjuk, ha szükséges. Miután a szélességet egy bizonyos értékre csökkentették, maguk a képek átméreteződnek. Figyelemmel figyelve, látni fogja azt is, hogy egyes tervezési elemek, például a navigációs linkek ikonra csökkenthetők, vagy eltűnhetnek. Ezt a CSS stíluslap is irányítja.

A webhelyek tervezésekor ne csak azt fontolja meg, hogy a weboldal tervezési elemei miként néznek ki a teljes képernyő szélességében, hanem hogy hogyan néznek ki egymásra rakva. Fontolja meg, hogy mely tervezési elemeket lehet eltávolítani a képernyőről a képernyő kisebb szélességében anélkül, hogy csökkentené a weboldal funkcionalitását. Mivel a reagáló formatervezés jellemzői és technológiája gyorsan megváltoznak, az összes fejlesztés lépése időigényes lehet. Ha inkább az idejét a kódolás helyett a tervezésre tölti, nézzen meg néhány, a Wordpress számára elérhető gyönyörű, érzékeny témát. Ha kicsi a tervező cég, akkor érdemes megfontolnia ezen érzékeny témaelrendezések egyikének kiindulását a webhelyek tervezésekor.

Video Utasításokat: Como hacer Responsive Design | Codigo para una Pagina Responsive (Lehet 2024).