Web - o platformă care oferă un simplu schimb de informații prin Internet, indiferent de dispozitivul pe care îl vizualizați. În timp ce diferențele dintre computerele care accesează Internetul constau în principal în rezoluții de ecran diferite, creșterea rapidă a dispozitivelor mobile a modificat cerințele: este important ca site-ul să fie disponibil și pe telefonul mobil.
Ce opțiuni există pentru a lucra cu dispozitive mobile?
- Nu faceți nimic și permiteți utilizatorilor de dispozitive mobile să mărească pentru a citi site-ul web.
- Creați un al doilea site, cum ar fi m.facebook.com, și redirecționați dispozitive mobile la acesta.
- Utilizați un design web receptiv.
Înainte de a continua, trebuie să definim niște termeni.
browser-
Software: Firefox, Google Chrome, Safari, Internet Explorer.
Responsabil design web
Ideea de web design receptiv este de a face site-ul dvs. să se adapteze la orice dispozitiv. Acest lucru se realizează prin direcționarea dispozitivelor utilizând CSS și prin aplicarea anumitor stiluri numai la aceste dispozitive.
În funcție de răspunsul la aceste întrebări, CSS receptiv va aplica reguli CSS diferite sau suplimentare.
Până în prezent, fiecare parte a CSS a fost utilizată de fiecare dispozitiv care are acces la pagina noastră web. Responsabilitatea web design-ului vă permite să aplicați anumite stiluri în anumite cazuri.
Cereri media
Trebuie să scriem blocuri în CSS care vor fi utilizate pe dispozitive care îndeplinesc criteriile acestui bloc. Astfel de blocuri sunt numite solicitări media.
Sintaxa interogărilor media seamănă cu sintaxa de cadre de animație cheie, deoarece definește un bloc în interiorul CSS. în care scrieți reguli CSS suplimentare și se aplică numai în anumite cazuri.
Mai mulți parametri
Este posibil să aveți nevoie de două condiții pentru a activa solicitarea mass-media.
De asemenea, puteți utiliza nu și numai. Ele sunt numite operatori logici.
Reguli multiple CSS
Puteți include cât mai multe reguli CSS în interogările dvs. media. atâta timp cât doriți.
Opțiunea de lățime este una dintre cele utilizate pe scară largă în design-ul web receptiv. Acest lucru se datorează faptului că paginile web sunt citite pe verticală. le defilam pentru a citi conținutul ascuns. Ca urmare, lățimea este fixă și limitată, în timp ce înălțimea sitului este variabilă.
Puteți utiliza:
Acești parametri iau px, em și rem.
orientare
rezoluție
Parametrul de rezoluție se referă la densitatea pixelilor dispozitivului și poate fi exprimat ca dpi (puncte per inch, puncte per inch) sau ca dpcm (puncte pe centimetru, puncte pe centimetru). Depinde de:
- rezoluție (de exemplu, 1440x900, 1280x800, 1024x768, etc.);
- diagonalele ecranului (de exemplu, 11.6 ", 14", 21 "etc.).
Densitatea pixelilor arată în principiu cât de precisă este afișajul dvs. (cu cât este mai mare rezoluția, cu atât este mai clar afișajul).
- Nokia Lumia 640: 332dpi
- Apple iPhone 6+: 401dpi
- Google Nexus 5: 445dpi
- HTC One: 469dpi
- Samsung Galaxy S6: 577dpi
Ce rol joacă stilurile aici? Ei bine, ecrane cu rezoluție ridicată afișează textul foarte clar: pixelii individuali devin abia vizibili și literele arată absolut neted.
În acest caz, stilul ar trebui să furnizeze o imagine de fundal implicită pentru fiecare dispozitiv și să aplice o imagine de fundal de înaltă rezoluție pe afișajele retinei.
Rețineți că trebuie să setați dimensiunea fundalului. În caz contrar, imaginea @ 2x pentru Retina va dura de două ori mai mult spațiu.
Sufixul @ 2x este doar o denumire de la Apple pentru imaginile retinei și a fost de facto acceptat ca intrare implicită în CSS.
Primul desktop mobil sau primul desktop
De obicei, mai întâi doriți să vă concentrați asupra unei versiuni complete pentru desktop, deoarece conține un design mai complex, care include coloane, efecte de hovering, poziționare absolută, împachetare și multe altele.
Dar dezvoltarea versiunii mobile este de fapt mai ușoară, deoarece "HTML-ul este aproape 100% receptiv din cutie". Majoritatea modelelor de pe telefonul mobil se concentrează doar pe aspectul vertical, cu mai puține difuzoare sau fără ele, deoarece deplasarea pe dispozitivele mobile este naturală.
Folosirea unui flux în proiectarea unui site mobil este primitivă: specificați doar elementele HTML așa cum doriți să fie afișate. Doar prin scrierea codului HTML, faceți deja designul site-ului dvs. mobil. Primul "cap", după acest meniu, apoi conținutul și la sfârșitul "subsolului". Voila!
CSS pentru telefoane mobile va utiliza min-width în interogările media pentru a aplica anumite reguli pentru ecrane mari:
Rețineți că în cazul "primului desktop", valorile min-lățime sunt cu o valoare mai mică decât valoarea maximă a lățimii în abordarea "primul mobil". De exemplu:
- @media (min-width: 768px) este destinată tabletelor;
- @media (max-width: 767px) nu vizează tabletele.
Trimiteți-le prietenilor: