É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.