Érzékenység a css, órák, webreferencia

Web - egy olyan platform, amely egyszerű információcserét biztosít az interneten keresztül, függetlenül attól, hogy mely eszközön látják ezt az információt. Miközben az internetet elérő számítógépek közötti különbségek főként különböző képernyőfelbontásokból álltak, a mobileszközök gyors növekedése megváltoztatta a követelményeket: fontos, hogy a webhely a mobiltelefonon is elérhető legyen.

Milyen lehetőségek vannak a mobileszközökön való munkavégzésre?

• Ne csináljon semmit, és ne engedélyezze a mobil felhasználókat a webhelyek olvasásához.
• Hozzon létre egy második webhelyet, például az m.facebook.com webhelyet, és irányítsa át a mobileszközöket.
• Használjon érzékeny webes dizájnt.

Mielőtt továbblépnénk, meg kell adnunk néhány szót.

böngésző
Szoftver: Firefox, Google Chrome, Safari, Internet Explorer.

Érzékeny webdesign

A megfelelő webes tervezés ötlete az, hogy webhelyét bármely eszközhöz alkalmazza. Ezt a célzási eszközök végzik a CSS használatával és bizonyos stílusok alkalmazását csak ezekre az eszközökre.

E kérdések megválaszolásától függően a válaszoló CSS ​​különböző vagy további CSS-szabályokat alkalmaz.

Eddig mindegyik CSS részünket minden olyan eszköz használta, amely hozzáfér a weboldalunkhoz. A válaszadó webes design lehetővé teszi bizonyos stílusok alkalmazását bizonyos esetekben.

Médiára vonatkozó kérelmek

A CSS-ben blokkokat kell írni, amelyeket olyan eszközökkel fogunk használni, amelyek megfelelnek a blokk kritériumainak. Az ilyen blokkokat média kéréseknek nevezik.

A média lekérdezések szintaxisa hasonlít a kulcsfontosságú animációs keretek szintaxisára, mivel egy blokkot határoz meg a CSS-ben. amelyben további CSS-szabályokat ír, és csak bizonyos esetekben alkalmazható.

Több paraméter

A média kérelem aktiválásához két feltételre van szükség.

Nem is, csak és nem. Ezeket logikai operátoroknak hívják.

Több CSS szabály

A médiakérdésekben annyi CSS-szabályt vehet fel. amíg csak akarsz.

A szélesség opció az egyik a széles körben alkalmazott reagáló web design. Ez annak köszönhető, hogy a weboldalakat függőlegesen olvasják. a rejtett tartalmak elolvasásához lapozzunk rajta. Ennek eredményeként a szélesség rögzített és korlátozott, míg a webhely magassága változó.

Használhatja:

Ezek a paraméterek a px, em és rem értéket veszi figyelembe.

tájolás

felbontás

A felbontás paramétere a készülék képpontsűrűségére vonatkozik, és dpi-ben fejezhető ki (dots per inch, dots per inch) vagy dpcm (dots per centimeter, dots per centimeter). Attól függ:

• felbontás (például 1440x900, 1280x800, 1024x768 stb.);
• a képernyő átlói (például 11,6 ", 14", 21 ", stb.).

A pixel sűrűsége alapvetően megmutatja, mennyire pontos a kijelzője (minél nagyobb a felbontás, annál világosabb a kijelző).

• Nokia Lumia 640: 332dpi
• Apple iPhone 6+: 401dpi
• Google Nexus 5: 445dpi
• HTC One: 469dpi
• Samsung Galaxy S6: 577dpi

Milyen szerepet játszanak a stílusok? Nos, a nagy felbontású képernyők nagyon világosan mutatják a szöveget: az egyes képpontok alig észrevehetőek, és a betűk teljesen simaak.

Ebben az esetben a stílusnak alapértelmezett háttérképet kell biztosítania minden eszköz számára, és nagy felbontású háttérképet kell alkalmazni a Retina képernyőkön.

Ne feledje, hogy a háttérméretet be kell állítani. Ellenkező esetben a @ 2x kép a Retina számára kétszer annyi helyet vehet igénybe.

A @ 2x utótag csak az Apple-nek a Retina képekre való kijelölése, de a CSS alapértelmezett bejegyzését ténylegesen elfogadta.

Első mobil vagy első asztal

Általánosságban először a teljes asztali verzióra kíván összpontosítani, mivel összetettebb tervet tartalmaz, amely oszlopokat, lebegőhatásokat, abszolút pozícionálást, csomagolást és még sok más elemet tartalmaz.

De a mobil verzió fejlesztése valójában könnyebb, mert "a HTML majdnem 100% -ban reagál a dobozból." A legtöbb mobiltelefonos webkamera csak a függőleges elrendezésre összpontosít, kevesebb hangszóróval vagy anélkül, mivel a mobileszközökön való görgetés természetes.

A mobileszköz tervezése során egy patak használata primitív: csak adja meg a HTML-elemeket, ahogy szeretné őket megjeleníteni. Csak a HTML kód megírásával máris megtervezi mobil webhelyének kialakítását. Első "sapka", ezt a menüt, majd a tartalmát és az "alagsor" végén. Voila!

A mobiltelefonok CSS-je a média lekérdezéseknél minimális szélességet alkalmaz, hogy bizonyos szabályokat alkalmazzon a nagyméretű képernyők esetében:

Megjegyezzük, hogy az "első asztali" minimális szélességi értékek az "első mobil" megközelítésnél kisebbek a max-width értékeknél. Például:

• @media (min-width: 768px) a tablettákra irányul;
• A @media (max-width: 767px) nem a táblagépekre irányul.