Responsive web design alapokat

• Állítsa be a látkép
• Méret tartalom a látkép
• a CSS media lekérdezéseket, érzékenység
• Hogyan válasszuk ki a töréspont
• Nézet media query töréspontok a Chrome DevTools

A használt mobil eszközök internetezhet tovább növekszik a csillagászati ütemben, pedig ezek az eszközök gyakran korlátozza a kijelző mérete igénylő, más a megközelítés, hogy hogyan tartalom határozza meg a képernyőn.,

reagáló web design, eredetileg meghatározott Ethan Marcotte egy listát egymástól, reagál az igényekre, a felhasználók, valamint az eszközök segítségével. Az elrendezés a készülék mérete és képességei alapján változik. Például egy telefonon a felhasználók egyetlen oszlop nézetben látják a tartalmat; a táblagép ugyanazt a tartalmat jelenítheti meg két oszlopban.

számos különböző méretben kapható létezik szerte telefonok, “phablets,” tabletta, asztali számítógépek, játékkonzolok, Tv-vel is viselhető., Képernyő mérete mindig változik, ezért fontos, hogy a webhely képes alkalmazkodni bármilyen képernyő mérete, ma vagy a jövőben. Ezenkívül az eszközök különböző tulajdonságokkal rendelkeznek, amelyekkel kölcsönhatásba lépünk velük. Például néhány látogató érintőképernyőt fog használni. A Modern reszponzív tervezés mindezen dolgokat úgy tekinti, hogy mindenki számára optimalizálja a tapasztalatot.

állítsa be a nézetablakot #

a különféle eszközökre optimalizált oldalaknak tartalmazniuk kell a meta nézetablakcímkét a dokumentum fejében.A meta viewport tag ad a böngésző utasításokat, hogyan kell irányítani az oldal méreteit, méretezés.,

ahhoz, hogy megpróbálja a legjobb élményt, mobil böngészők renderaz oldal egy asztali képernyő szélessége (általában körülbelül 980px, bár ez variesacross Eszközök), majd próbálja meg, hogy a tartalom jobban néz ki növelvefont méretek és méretezés a tartalom, hogy illeszkedjen a képernyőn.Ez azt jelenti,hogy a betűméretek inkonzisztensnek tűnhetnek a felhasználók számára, akiknek esetleg duplán kell megérinteniük vagy kicsinyíteniük a zoomt ahhoz, hogy láthassák és kölcsönhatásba léphessenek a tartalommal.,

a meta nézetport érték használatával width=device-width utasítja az oldalt, hogy illeszkedjen a képernyő szélességéhez az eszközfüggetlen pixelekben. Egy eszköz (vagy sűrűség) független pixel Egy képpont ábrázolása, amely nagy sűrűségű képernyőn sok fizikai képpontból állhat. Ez lehetővé teszi az oldal reflowcontent számára, hogy megfeleljen a különböző képernyőméreteknek, akár egy kis mobiltelefonon, akár egy nagy asztali monitoron.,

néhány böngészőaz oldal szélessége állandó, amikor parkosításra vált, és a képernyő kitöltése helyett nagyítás., Hozzátéve, hogy az értékinitial-scale=1 arra utasítja a böngészőt, hogy létrehoz egy 1:1 kapcsolat CSSpixels, valamint eszköz-független pixel, függetlenül attól, hogy eszköz orientáció, andallows az oldalt, hogy kihasználják a teljes táj szélesség.

a nem rendelkezik<meta name="viewport"> címkével width vagy initial-scaleLighthouse audit segítségével automatizálhatja azt a folyamatot, amely biztosítja, hogy HTML dokumentumai helyesen használják a viewport meta címkét.,

Biztosítani hozzáférhető látkép #

amellett, hogy a beállítás egy initial-scale,akkor is be a következő attribútumok a látkép:

• minimum-scale
• maximum-scale
• user-scalable

Ha be van állítva, hogy ezek letilthatja a felhasználó az”s képes zoom a látkép,potenciálisan okoz, kisegítő kérdések.Ezért nem javasoljuk ezeket az attribútumokat.,

Méret tartalom a látkép #

mind Az asztali, mind mobil készülékek,a felhasználók használnak, hogy görgetés weboldalak függőlegesen, de vízszintesen;arra kényszeríti a felhasználót, hogy vízszintesen görgetni vagy zoom a rendezvény érdekében, hogy az egész oldal eredmények rossz felhasználói élményt.

amikor a fejlődő egy mobil oldalon egy meta viewport tag, ez könnyen véletlenül létre oldal tartalmát, amely nem egészen illeszkedik a megadott nézetablakban.Például egy olyan kép, amely a viewportnál szélesebb szélességben jelenik mega nézetablakot vízszintesen görgetheti.,Ezt a tartalmat úgy kell beállítania,hogy illeszkedjen a nézetablak szélességéhez, hogy a felhasználónak ne kelljen vízszintesen görgetnie.

A tartalom nem méretezhető megfelelően a viewportLighthouse audithoz, amely segít automatizálni a túlcsorduló tartalom észlelésének folyamatát.

képek #

egy kép rögzített méretű, és ha nagyobb, mint a nézetablak okoz egy görgetősáv.A probléma kezelésének általános módja az, hogy minden képet max-width 100%.,Ez azt eredményezi,hogy a kép zsugorodik, hogy illeszkedjen a helyéhez, ha a nézetablak mérete kisebb, mint a kép.Mivel azonban amax-width, ahelyett,hogy awidth100%, a kép nem nyúlik nagyobb, mint a természetes size.It általában biztonságos a következőket hozzáadni a stíluslaphozígy soha nem lesz probléma a görgetősávot okozó képekkel.,

adja hozzá a kép méreteit az img elemhez #

max-width: 100% a kép természetes méreteit felülírja,azonban továbbra is a width és height attribútumok a <img> címkén.Ennek oka az, hogy a modern böngészők ezt az információt arra használják,hogy helyet foglaljanak a képbenmielőtt betölti, ez segít elkerülni az elrendezés eltolódását tartalomterhelésként.,

Elrendezés #

Mivel a képernyő méretek szélesség CSS pixel széles körben változhat az eszközök között(például között telefonok, táblagépek, sőt a különböző telefonok),a tartalom nem támaszkodik az adott látkép szélesség teszi jól.

a múltban, ez a szükséges beállítási elemek létrehozásához használt elrendezés percentages.In az alábbi példában látható egy két oszlopos elrendezés lebegett elemekkel, képpontokkal méretezve.Miután a nézetablak kisebb lesz, mint az oszlopok teljes szélessége, vízszintesen kell görgetnihogy megnézze a tartalmat.,

a szélességek százalékának használatával az oszlopok mindig a tartály bizonyos százalékában maradnak.Ez azt jelenti, hogy az oszlopok szűkebbé válnak, nem pedig görgetősávot hoznak létre.

Modern CSS layout technikák, mint a Flexbox, Grid Layout, and Multicolmake létrehozása ezeket a rugalmas rácsok sokkal könnyebb.,

Flexbox #

Ez az elrendezési módszer ideális, ha különböző méretű elemekből állés azt szeretné, hogy kényelmesen illeszkedjenek egy sorba vagy sorba,a kisebb elemek kevesebb helyet foglalnak el, a nagyobbak pedig több helyet kapnak.

érzékeny kivitelben a Flexbox segítségével egyetlen sorként jelenítheti meg az elemeket, vagy több sorra csomagolva,mivel a rendelkezésre álló hely csökken.

Tudjon meg többet a Flexbox-ról.

CSS Rácselrendezés #

a CSS Rácselrendezés lehetővé teszi a rugalmas rácsok egyszerű létrehozását.,Ha figyelembe vesszük a korábban lebegtetett példát,ahelyett, hogy százalékos oszlopokat hoznánk létre, használhatnánk a rács elrendezését és afr egységet,amely a tárolóban rendelkezésre álló hely egy részét képviseli.

Grid is használható,hogy hozzon létre a rendszeres rács elrendezések, annyi elem, mint illik.A rendelkezésre álló zeneszámok száma a képernyő méretével csökken shrinks.In az alábbi demo, annyi kártya van, amely minden sorra illeszkedik, minimális mérete 200px.,

bővebben CSS Grid Layout

Több oszlopos elrendezés #

A bizonyos típusú elrendezés használható Több oszlopos Elrendezés (Multicol),amely képes létrehozni érzékeny számú oszlopok a column-width ingatlan.A demo alábbiakban láthatod, hogy oszloppal egészül ki, ha van hely még egy 200px oszlop.,

Tudjon meg többet a Multicol

használja a CSS media lekérdezéseket a válaszképességhez #

néha szélesebb körű változtatásokat kell végrehajtania az elrendezésbenhogy támogasson egy bizonyos képernyőméretet, mint a fenti technikák lehetővé teszik.Ez az, ahol a média lekérdezések hasznossá válnak.

a média lekérdezések egyszerű szűrők, amelyek alkalmazhatók a CSS stílusokra.,Megkönnyítik a stílusok megváltoztatását a tartalmat megjelenítő eszköz típusa vagy az eszköz jellemzői alapján, például szélesség, magasság, tájolás,lebegési képesség, valamint az, hogy az eszközt érintőképernyőként használják-e.,

nyújt különböző stílusok nyomtatási kell, hogy a cél egy olyan típusú kimenet így is magában stíluslap a nyomtatási stílusok a következők:

a másik lehetőség, hogy magában foglalhatja a nyomtatási stílusok belül a fő stíluslap használatával media query:

a reszponzív webdizájnhoz általában az eszköz funkcióit kérdezzük, hogy a kisebb képernyők számára eltérő elrendezést biztosítsunk, vagy amikor észleljük, hogy látogatónk érintőképernyőt használ.

media queries based on viewport size #

Media queries enable us to create a responsive experiencewhere specific styles are applied to small screens, large screens, and anywhere in between.Az itt észlelt funkció tehát a képernyő mérete, ezért a következő dolgokat tesztelhetjük.,

• width (min-width, max-width)
• height (min-height, max-height)
• orientation
• aspect-ratio

All of these features have excellent browser support,for more details including browser support information seewidth,height,orientation, andaspect-ratio on MDN.

az eszköz képességén alapuló média lekérdezések #

a rendelkezésre álló eszközök köre miatt nem feltételezhetjük, hogy minden nagy eszköz rendszeres desktopor laptop számítógép, vagy hogy az emberek csak érintőképernyőt használnak egy kis eszközön.,A media queries specifikáció néhány újabb kiegészítésévelpróbálhatunk olyan funkciókat, mint például az eszközzel való interakcióhoz használt mutató típusaés hogy a felhasználó képes-e lebegni az elemek felett.

• hover
• pointer
• any-hover
• any-pointer

próbálja meg megtekinteni ezt a demót különböző eszközökön,például rendszeres asztali számítógépen, telefonon vagy táblagépen.

ezek az újabb funkciók jól támogatják az összes modern böngészőt., Tudjon meg többet az MDN oldalakonhover, any-hover, pointer, any-pointer.

any-hover és any-pointer #

a jellemzők any-hover és any-pointer teszt, ha a felhasználó rendelkezik a capabilityto hover, vagy használja ezt a típust a mutató akkor is, ha nem ez az elsődleges módja annak, hogy kölcsönhatásba lépnek a device.Be nagyon óvatos, ha ezeket használja.Nem túl barátságos arra kényszeríteni a felhasználót, hogy egérre váltson, amikor érintőképernyőjét használja!,Azonban a any-hoverés any-pointer hasznos lehet, ha fontos kitalálni, hogy milyen eszközzel rendelkezik a felhasználó.Például egy érintőképernyős és trackpados laptopnak meg kell egyeznie a durva és finom mutatókkal, amellett, hogy képes lebegni.

hogyan válasszuk ki a töréspontokat #

ne definiáljuk a töréspontokat az eszközosztályok alapján.A töréspontok meghatározása bizonyos eszközök, termékek,márkanevek vagy operációs rendszerek alapján, amelyek ma használatban vannak, karbantartási rémálmot eredményezhet.,Ehelyett magának a tartalomnak kell meghatároznia, hogy az elrendezés hogyan igazodik a tartályához.

válasszon nagyobb töréspontokat a kicsi elindításával, majd dolgozzon fel #

tervezze meg a tartalmat, hogy először egy kis képernyőméretre illeszkedjen,majd bontsa ki a képernyőt, amíg töréspont szükséges.Ez lehetővé teszi a töréspontok optimalizálását a tartalom alapjánés tartsa fenn a lehető legkevesebb töréspontot.

dolgozzuk át az elején látott példát: az időjárás-előrejelzést.Az első lépés az, hogy az előrejelzés jól nézzen ki egy kis képernyőn.,

ezután méretezze át a böngészőt, amíg túl sok fehér hely van az elemek között,és az előrejelzés egyszerűen nem néz ki olyan jól.A döntés kissé szubjektív, de a 600px felett minden bizonnyal túl széles.

töréspont beszúrásához a 600px, hozzon létre két média lekérdezést a CSS végén az összetevőhöz,az egyiket akkor használja, ha a böngésző 600px és az alábbiakban, egy pedig akkor, ha szélesebb, mint a 600px.

végül refactor a CSS. A max-width 600pxmédia lekérdezésén belül adja hozzá a CSS-t,amely csak kis képernyőkhöz használható., Amin-width 601px CSS hozzáadása nagyobb képernyőkhöz.

válasszon kisebb töréspontokat, ha szükséges #

amellett,hogy a nagyobb töréspontokat választja, amikor az elrendezés jelentősen megváltozik, hasznos a kisebb változások beállítása is.Például a főbb töréspontok között hasznos lehet a margók vagy a párnázat beállítása egy elemen, vagy a betűméret növelése, hogy természetesebbnek érezze magát az elrendezésben.

kezdjük a kis képernyő elrendezésének optimalizálásával.,Ebben az esetben növeljük a betűtípust, ha a nézetablak szélessége nagyobb, mint a 360px.Másodszor, ha van elég hely, el tudjuk különíteni a magas és alacsony hőmérsékletet úgy, hogy ugyanazon a vonalon legyenek, mint egymás tetején.És tegyük az időjárási ikonokat is egy kicsit nagyobbá.

Hasonlóképpen, a nagy képernyők ez a legjobb, hogy korlátozza a maximális szélessége az előrejelzés panelígy nem fogyaszt a teljes képernyő szélessége.,

optimalizálja a szöveget az olvasáshoz #

A Klasszikus olvashatóság elmélete azt sugallja, hogy az ideális oszlopnak soronként 70-80 karaktert kell tartalmaznia(körülbelül 8-10 szó angolul).Így minden alkalommal, amikor egy szövegblokk szélessége körülbelül 10 szó fölé nő, fontolja meg a töréspont hozzáadását.

vessünk egy mélyebb pillantást a fenti blogbejegyzési példára.Kisebb képernyőkön a Roboto betűtípus a 1em tökéletesen működik,így soronként 10 szót ad, de a nagyobb képernyők megkövetelik a breakpoint.In ebben az esetben, ha a böngésző szélessége nagyobb, mint 575px, az ideális tartalomszélesség 550px.,

kerülje a tartalom egyszerű elrejtését #

legyen óvatos, amikor kiválasztja, hogy milyen tartalmat kell elrejteni vagy megjeleníteni a képernyő méretétől függően.Ne egyszerűen elrejteni tartalmat csak azért, mert nem fér el a képernyőn.A képernyő mérete nem jelenti azt, hogy a felhasználó mit szeretne.Például a pollenszám eltávolítása az időjárás-előrejelzésbőlsúlyos kérdés lehet a tavaszi allergiában szenvedők számára, akiknek szükségük van az információrahogy meghatározzák, hogy kimehetnek-e vagy sem.,

View media query töréspontok Chrome DevTools #

Miután megvan a Média lekérdezés töréspontok beállítása, akkor szeretné látni, hogy a webhely néz ki velük.Átméretezheti a böngészőablakot a töréspontok kiváltásához, de a Chrome DevTools beépített funkcióval rendelkezik, amely megkönnyíti az oldal megjelenésétkülönböző töréspontok alatt.

az oldal megtekintéséhez különböző töréspontok alatt:

nyitott DevToolsand majd kapcsolja be az eszköz módot.Ez alapértelmezés szerint érzékeny módban nyílik meg.

a Média lekérdezéseinek megtekintéséhez nyissa meg az eszköz mód menüt, majd válassza kia média queriesto megjelenítése a töréspontokat színes sávokként jelenítse meg az oldal felett.

kattintson az egyik sávra az oldal megtekintéséhez, amíg a Média lekérdezés aktív.,Kattintson a jobb gombbal a sávra, hogy ugrik a Média lekérdezés meghatározása.

---