A webhely tervezésekor fontos, hogy a képernyő méretétől és alakjától függetlenül minden eszközön jól nézzen ki. A reszponzív webhelyeket úgy tervezték, hogy jól nézzenek ki mindenféle modern eszközön, például számítógépen, telefonon, táblagépen, tévén, hordható eszközön és még az autó képernyőjén is. Ahhoz, hogy egy webhely reszponzív legyen, módosítania kell a CSS- és a HTML -kódját, hogy elemei automatikusan átméreteződjenek az adott körülményektől függően. Ez a wikiHow megtanítja, hogyan kell megtervezni és megvalósítani az alap reszponzív webdesign -ot.
Lépések
Módszer 1 /3: A reszponzív tervezés tervezése
1. lépés. Tudja meg, hogyan használja közönsége webhelyét
Manapság az interneten böngésző emberek többsége ezt mobiltelefonról és táblagépről teszi. Ahhoz, hogy egy webhely reagáljon, gondoskodnia kell arról, hogy megfelelően jelenjen meg, függetlenül attól, hogy hol nézik. Ha az idő és a pénz a legfontosabb, összpontosítson a felhasználók által legnépszerűbb eszközök típusaira (ha ez az információ rendelkezésre áll), és arra, hogyan használják az Ön webhelyét. Az elemzőszoftver vagy más kutatási forma segítségével megtudhatja:
- Milyen eszközöket használnak leggyakrabban a webhely megtekintéséhez, különös figyelmet fordítva a mobiltelefon/táblagép/számítógép márkákra és a képernyő/felbontás méretére.
- Mely böngészők a legnépszerűbbek a felhasználók körében. Ami a globális statisztikákat illeti, a Google Chrome a legnépszerűbb webböngésző világszerte, de a Safari a második.
- Hogyan használják látogatói webhelyét, például mennyi időt töltenek a megtekintéssel, hol nézik, és melyik tartalom a legnépszerűbb. Ez segíthet annak meghatározásában, hogy milyen típusú tartalmat kell tartalmaznia, és melyeket ki lehet hagyni.
2. lépés: Tervezzen különböző elrendezéseket a különböző eszközökhöz
A CSS és a JavaScript kombinációjával felismerheti a felhasználó eszközét, valamint annak képességeit (függetlenül attól, hogy támogatja -e a Java -t, a Flash -t stb.), És ennek megfelelően megjelenítheti webhelye egy adott verzióját. A CSS médialekérdezések különösen hasznosak az eszköz méretének/felbontásának meghatározásához.
3. Számlálás a különböző típusú interakciókkal
Látogatója interakcióba léphet webhelyével egér, billentyűzet, érintőképernyő vagy akár látássérültek képernyőolvasója segítségével. Ezt figyelembe véve a webhelynek reagálnia kell az egérkattintásokra, a billentyűzet billentyűkre (Tab, Enter, Return stb.) És a képernyő ujjlenyomataira.
A lebegő hatások nem működnek semmivel, kivéve az egeret. Ezen effektusok használata helyett használhatja a látogatót, hogy kattintson egy gombra vagy ikonra, hogy megjelenítse mindazt, ami korábban az egér lebegtetésén látható volt
4. lépés: Fontolja meg a tartalomkezelő rendszer (CMS) használatát
Egy egyszerű módja annak, hogy webhelyének kialakítása reszponzív legyen, ha előre telepített, reszponzív témájú CMS-t használ. A CMS, például a Joomla, a Drupal vagy a Wordpress használata biztosítja, hogy webhelye minden eszközön jól nézzen ki anélkül, hogy saját magának kellene kódolnia a reagáló elemeket. Érdeklődjön webtárhely -szolgáltatójánál, hogy mely CMS -eszközök érhetők el a szolgáltatáshoz.
5. lépés: Használjon online eszközöket webhelye teszteléséhez
Most, hogy a reszponzív webdesign népszerűsége megnövekedett, számos ingyenes eszköz használható a webhely tesztelésére. Ha már kódolta webhelyét, használja ezeket az eszközöket annak tesztelésére, hogy hogyan néz ki különböző körülmények között, így tudni fogja, hol kell javítani a válaszkészséget:
- A Google mobilbarát tesztje: Tudja meg, hogy webhelye olyan jól működik-e mobileszközökön, mint a számítógép képernyőjén.
- resizeMyBrowser: Lehetővé teszi a webhely különböző felbontásban történő megtekintését.
- Válaszadó: Megjeleníti webhelyét a különböző eszközképernyőkön, különböző elrendezésben (oldalt vagy jobb oldalt felfelé).
2. módszer a 3 -ból: Az oldal elrendezésének reagálása
1. lépés. Fontolja meg az ingyenes, reszponzív stíluslap -keretrendszert
A keretrendszer HTML, CSS és/vagy JavaScript előre megírt halmaza, amelyet a webhely csontvázaként használhat. A keretrendszereket minden böngészővel tesztelték és optimalizálták, így mindössze annyit kell tennie, hogy beszúrja a tartalmat, hozzáadja a média- és színbeállításokat, és közzéteszi webhelyét. Néhány népszerű keretrendszer:
- Bootstrap
- Csontváz
- Alapítvány
2. lépés: Állítsa be a nézetablakot egy metacímkével
Ha nem használ keretrendszert, akkor a reszponzív webhely kódolásának legfontosabb aspektusával kell kezdenie: a nézetablakkal. A nézetablak a webhely azon része, amely látható a felhasználó számára. A kulcs ahhoz, hogy webhelye megfelelően jelenjen meg a képernyő méretétől függetlenül, a META címke nézetablak méretének skálázása. Ehhez adja meg ezt a címkét a webhely minden oldalának tetején:
3. lépés. Adja meg a szövegméretet a nézetablakhoz viszonyítva
Miután beállította a nézetablakot, az oldal szövege a képernyőhöz igazodik. Előfordulhat azonban, hogy a betűtípusok túl nagyok vagy túl kicsik, ha a méretük nincs megadva a nézetablakhoz képest. Ezt úgy teheti meg, hogy a betűméretet a nézetablak meghatározott százalékában határozza meg a vw egységgel. Ez a példa azt mondja, hogy a H1 fejlécek a nézetablak szélességének 10% -án jelenjenek meg, méretétől függetlenül:
wikiHow
4. lépés: A médialekérdezések segítségével különböző stílusokat jeleníthet meg a különböző képernyőméretekhez
A médialekérdezések lehetővé teszik, hogy a képernyő méretétől függően válassza ki, hogy megjelenjenek -e bizonyos CSS -elemek. A CSS -fájlban megadhatja a médialekérdezés sajátosságait. Ebben a példában a test háttérszíne vörösre vált, ha a felhasználó képernyőmérete 480 képpont vagy nagyobb:
wikiHow
@media képernyő és (min-szélesség: 480px) {body {background-color: aqua; }}
3. módszer a 3 -ból: A képek reszponzívvá tétele
1. lépés A képek méretezéséhez használja a CSS width tulajdonságot
Ahelyett, hogy a kép szélességét meghatározott képpontokra (például 500 képpont) állítaná, használjon százalékot (pl. 100%), hogy a kép a szülő szélességére nézzen, és ennek megfelelően állítsa be. Ha a kép szélességét 100% -ra állítja, akkor a kép a néző képernyőméretétől függően felfelé és lefelé méretezhető. Ehhez sorban:
2. lépés: A maximális szélesség tulajdonsággal korlátozhatja a kép tényleges méretének méretezését
Ha az előző lépésben a szélesség tulajdonságot használja a kép 100% -os skálázására, akkor a kép méretétől függetlenül növekszik vagy zsugorodik, hogy beleférjen a tároló 100% -ába. Ez azt jelenti, hogy ha a kép a kisebbik oldalon van, akkor nagyobb lesz, mint az eredeti méret, és gyengébb minőségű. Ennek elkerülése érdekében a max-width használatával állítsa be a kép maximális méretezési méretét 100% -ra (a tényleges méretre). Itt van, hogyan:
Lépés 3. Használja a HTML képelemet a különböző képek különböző méretű képernyőre történő megjelenítéséhez
Ha egyedi méretű képeket szeretne létrehozni, amelyek különböző méretű képernyőkön jelennek meg, akkor megadhatja, hogy mely fényképeket jelenítse meg a HTML-kódban. Hozza létre a különböző méretű képeket, majd használja ezt a kódot példaként a 600 és 1500 képpontos szélességű képernyőkön használni kívánt kép megadásához:
