în lumea de astăzi, există o multitudine de dispozitive din care oamenii să aleagă și poate fi descurajant să încerce să se acomodeze și să construiască pentru cele mai bune experiențe pe toate dispozitivele. Cu toate acestea, este important să fiți la curent cu cele mai populare dimensiuni și rezoluții ale ecranului atunci când proiectați site-uri web și mobile. Un site care este optimizat și responsive face pentru un flux de utilizator mai ușor și în cele din urmă, o experiență plăcută pentru publicul.,
dimensiunea ecranului, rezoluția și portul de vizualizare: ce înseamnă toate acestea?
când cumpărați un dispozitiv, veți vedea adesea atât dimensiunea ecranului, cât și rezoluția enumerate în specificații. Screensize este măsurarea fizică în diagonală a ecranului în inci. Acest lucru nu trebuie confundat cu rezoluția, care este numărul de pixeli de pe ecran afișat adesea ca lățime pe înălțime (adică 1024×768). Deoarece dispozitivele cu aceeași dimensiune a ecranului pot avea rezoluții foarte diferite, dezvoltatorii folosesc viewports atunci când creează pagini prietenoase pentru Dispozitive mobile., Viewports sunt scalate în jos versiuni de rezoluții care permite site-uri pentru a fi vizualizate mai consistent pe diferite dispozitive. Vizualizările sunt adesea mai standardizate și mai mici decât dimensiunile rezoluției.
în timp ce afișajele desktop și laptop sunt orientate peisaj (mai larg decât înalt), multe dispozitive mobile pot fi rotite pentru a afișa site-uri web atât în peisaj, cât și în portret (mai înalt decât lat) orientări. Aceasta înseamnă că designerii și dezvoltatorii trebuie să proiecteze pentru aceste diferențe.
aveți nevoie de ajutor pentru a determina dacă site-ul dvs. este receptiv? Utilizați instrumentul nostru gratuit MG, Responsive Design Checker.,
în timp ce afișajele desktop și laptop sunt orientate peisaj (mai larg decât înalt), multe dispozitive mobile pot fi rotite pentru a afișa site-uri web atât în peisaj, cât și în portret (mai înalt decât lat) orientări. Aceasta înseamnă că designerii și dezvoltatorii trebuie să proiecteze pentru aceste diferențe.
Responsive Styling
ar fi aproape imposibil pentru companii de a proiecta pentru fiecare dispozitiv în parte. În schimb, atunci când programați modele receptive, dezvoltatorii deseori:
- grupează stilul în cele mai tipice dimensiuni de dispozitiv pentru telefoane, tablete și desktop-uri., În acest caz, orice mai mare de 7 inci este de obicei afișat la rezoluția desktopului sau-
- utilizați puncte de întrerupere (lățimi definite ale pixelilor pe care afișajul le va ajusta în funcție de dimensiunea ecranului) în funcție de design și aspect
uneori, un dezvoltator ar putea alege să combine ambele metode dacă consideră necesar. Vă recomandăm să începeți prin gruparea dimensiunilor tipice ale dispozitivului împreună.
dacă sunteți dezvoltator și doriți să generați stilurile necesare pentru a gestiona stilul mobil sau responsiv, mai jos am inclus un fragment de CSS care ar putea ajuta.,d fi utilizate numai ca un ghid pentru a obține a început:
/* start of desktop styles */
@media screen și (max-width: 991px) {
/* începe de tablete mari stiluri */
}
@media screen și (max-width: 767px) {
/* începe de mediu tableta stiluri */
}
@media screen și (max-width: 479px) {
/* începe de telefon stiluri */
}
cele Mai Populare Rezoluții de Ecran
Știind că aceasta este cheia pentru a se potrivi pentru diferite dispozitive, atunci când proiectarea site-uri web, am compilat o listă de cele mai up-to-data de dispozitive cu normele lor pixel dimensiuni și ferestre de mai jos., Am pus, de asemenea, aceste informații într-un PDF descărcabil la îndemână.,560
Got anymore tips or suggestions on how to handle different screen sizes and resolutions?, Partajați cu noi pe Facebook!