Hogyan készítsünk egy adaptív design a helyén alatt minden képernyőfelbontás
Üdvözlet, alkalmi látogatók, és rendszeres olvasók Royal-Site.ru blog!
Néhány évvel ezelőtt, frissítettem a blogomat, ami a semmiből egy teljesen téma wordpress. Körülbelül hogyan történt, írtam a cikkben: „A globális frissítés és átszervezi oldalamon”. Az egyik legfontosabb feladat, amikor létrehoz egy új sablont - adaptív elrendezése a honlap minden képernyő felbontással.
Egy rövid cikk terv:
Egy korábbi cikkben azt írta, hogy ez adaptív tervezése és miért van szükség rá. De hogyan lehet elérni ezt a nagyon alkalmazkodó?
Hogyan készítsünk egy adaptív elrendezés oldalon
Először is, ha jön elő adaptív design a helyén, a címkék között
Milyen ostoba voltam, hogy nem így azonnal, mikor arra törekedjünk, hogy egy adaptív elrendezése a helyszínen.
A probléma a mobil böngészők saját skála oldal elrendezését, sőt az adaptív.
De ez nem lehet!
Kiderült, hogy ha nem regisztrálja a kódot, amely már említettük, a mobil böngésző nem érti, hogy a webhely adaptív, és egyszerűen próbálja csökkenteni az oldalt az oldal úgy, hogy van egy kis képernyős mobiltelefon.
Mivel a butaság és a hozzá nem értés, elvesztettem egy csomó időt. De most már örökre emlékezni))).
Adaptív elrendezés CSS médialekérdezéseket
Ahhoz, hogy az adaptív oldal elrendezését CSS használatával, akkor kell használni a média lekérdezések.
Hogy-hogy? Igen, nagyon egyszerű. A CSS fájlt, akkor regisztrálnia kell lekérdezéseket, mint:
Ez a kód azt jelenti, hogy a stílusok között "<> „Fog működni monitorhoz a legkisebb szélessége és maximális 1440px 1599px.
Vagyis azok, stílusok elemei a helyszínen, ami kell igazítani függően a képernyő felbontását kell külön regisztrálni minden lehetséges szélessége a képernyőn.
A legfontosabb felbontású képernyő, egy adaptív elrendezése
- 320 px - Mobile eszközök (álló tájolás);
- 480 px - Mobil eszközök (táj);
- 600 px - Kis lemezek;
- 768 px - lemezeket (álló tájolás);
- 1024 px - lemezek (fekvő) / netbook;
- 1280 px, és több - PC-re.
Ez a következő engedélyeket, és meg kell, hogy összpontosítson, és adjon nekik különös figyelmet az adaptív elrendezés. Ezek a leggyakoribb típusú képernyőfelbontás.
bootstrap reagáló tervezés
Nagyon hasznos létrehozása adaptív layout bootstrap. Kényelem a tény, hogy az összes stílus adaptációs blokk, gombok, táblázatok, stb Már regisztrált bootstpap. Ez csak akkor szükséges, hogy megértsük, milyen osztály bármely elemhez.
A kezdéshez töltse le a legújabb verzióját bootstrap és csatlakoztassa a webhelyen. Megjegyezzük, hogy a kapcsolat stílusok és szkriptek wordpress megvannak a maga sajátosságai.
Fészkel bootstrap azzal jellemezve, hogy a szélessége a készülék, vagy a képernyő van osztva 12 egyenlő részre. Illetve hozzárendelni egy adott osztálya blokk lehet beállítani egyenlő a kívánt szélességét a blokk alkatrészek számát.
Például, az ilyen szerkezetnek választ egyet a tartalmi blokk szélessége és 8 rész keskenyebb az oldalsáv 4 a képernyő:
Azt is beállíthatja a francia szélétől ismét a kívánt darabszámot. Például ez a kialakítás:
blokk szélessége úgy van beállítva, 10 rész behúzott bal oldali részén a képernyő 1.
Ha megnézzük, ez működni a bootstrap dolgozni reagáló web design nagyon gyorsan. Abban, hogy pontosan mi a stílusok működik megfelelően, és nem lesz semmi, a görbe ezen az oldalon.
Ellenőrzése a helyszínen alkalmazkodóképesség
De felmerül a kérdés: hogyan lehet tesztelni a alkalmazkodóképessége a honlap? Itt már regisztrált médialekérdezések CSS, csatlakozik a bootstrap és használja az osztályok. Hogyan ellenőrzik, hogy a helyszínen van kialakítva rendesen minden képernyőfelbontás.
Nagyon pontos és ami a legfontosabb egy ingyenes szolgáltatás, amely tiszteletet érdemel, és hála webmesterek és webes tervezők, akik részt vesznek az adaptív elrendezés oldalakon.
Igen, hogy adaptív design a helyén, akkor keményen kell dolgoznunk. De ezek a munkájával jutalmazni támogató attitűd, hogy a webhely keresők, és ami a legfontosabb, a webhely látogatói.
