Állítsa be a webhelyét az összes állásfoglaláshoz

A webhely tervezése során az egyik legfontosabb dolog, amit szem előtt kell tartani, annak biztosítása, hogy az oldal megfelelően jelenjen meg az összes méretű képernyőn és eszközön. Ezt úgy teheti meg, hogy egy sor kódot helyez be az oldalára, amely meghatározza az oldal relatív szélességét vagy a minimális és maximális felbontási értékeket.

Ez a gyors cikk tippeket ad arra vonatkozóan, hogyan biztosítható, hogy a webhelye megfelelően jelenjen meg minden méretben .

Állítsa be a webhelyét az összes képernyõre

Az oldal relatív szélességének meghatározása a weblap tervezéséhez ajánlott módszer, mivel az oldal képes bármilyen méretű képernyőkhöz igazodni. A szélesség százalékos meghatározásával, szemben az egységszámmal, az oldal minden egyes darabjára bizonyos mértékű rugalmasságot épít, amely lehetővé teszi, hogy növekedjen vagy zsugorodjon a néző képernyőjének adatai alapján.

A weboldal relatív szélességének meghatározása testcímkékkel történik. Ez a címke módosítható, ha div # testet használ:

 body {szélesség: 100%;} 

Ebben a példában a kód azt írja elő, hogy a webhely oldala az ablak 100% -át veszi figyelembe, függetlenül a megjelenítő képernyő méretétől. Ha azt szeretné, hogy az oldal kissé kisebb legyen, javasoljuk, hogy a szélességét legalább 80% -ra állítsa be, vagy azt kockáztatja, hogy a tartalom túl kicsi a képernyőn. Ha kisebb szélességet ad meg, akkor a képernyőt a margó: automatikus beállításával fókuszálhatja.

Minimális vagy maximális szélesség tulajdonság

A minimális vagy maximális szélességű tulajdonság használható a webhely beállításakor is, hogy minden típusú felbontásra illeszkedjen. Fontos azonban megjegyezni, hogy az Internet Explorer nem támogatja a minimális szélességet, és hogy a maximális szélesség beállítása torz megjelenítést eredményezhet, ha egy kisebb oldal nem fér egy nagyobb képernyőhöz.

Íme egy példa egy olyan webhelyre, amely 90% -os oldalszélességgel rendelkezik, középen, minimum 600 pixel szélességgel és legfeljebb 2000 pixel szélességgel:

 body {szélesség: 90%; margin: auto; min-width: 600px; max-szélesség: 2000px}