Crearea unui „cauciuc“ a site-ului pentru diferite rezoluții de ecran

La crearea unui design de pagini web trebuie să ia în considerare mai multe lucruri. Cel mai important dintre ele sunt dimensiunea monitorului și rezoluția ecranului publicului de pe site. Paginile web ar trebui să fie suficient de flexibil pentru a fi corect afișate în browsere diferite (a se vedea articolul despre compatibilitatea cross-browser) și ecran de configurare.

Care este rezoluția ecranului?

Zona vizibilă a ecranului nu depinde de o varietate de rezoluții de ecran suportate de monitor. „Resolution“ - este cantitatea de informații (pixeli), care poate afișa monitorul. Cu o rezoluție mai mare afișează mai multe informații decât cu mai puțin.

Pe baza acestor informații, următoarele concluzii:

Dimensiunea fiecărui pixel este redusă odată cu creșterea rezoluției. Acest lucru se datorează faptului că în aceeași zonă a ecranului afișează mai mulți pixeli.

Ilustrațiile și dimensiunea textului x de pixeli y, de asemenea, scade odată cu creșterea rezoluției.

Aceste imagini reprezintă două monitoare de aceeași dimensiune (aceeași zonă vizibilă), care funcționează la rezoluții diferite. Un monitor rulează la o rezoluție mai mare decât monitorul în, și, prin urmare, prezintă un număr mai mare de pixeli mai mici.

Tabel fix față relativă

Pentru a ilustra acest lucru, luați în considerare exemplul următor. Dacă creați un tabel cu patru celule, fiecare având o lățime de 100 de pixeli, acest tabel va fi stabilită, deoarece dimensiunile exacte ale setului. Lățimea mesei va fi întotdeauna egal cu 400 pixeli (4 x 100). Dimpotrivă, în cazul în care creați un tabel de patru celule, lățimea care este egală cu 25% din lățimea totală a ecranului, shiriga de masă în pixeli va depinde de rezoluția ecranului curent.

Program de lectură recomandată în care puteți face un design pagină prototip

De exemplu, dacă rezoluția este setată la 800 × 600, fiecare celulă a tabelului va avea o lățime de 200 de pixeli. Lățimea întregul tabel va fi egală cu 800 pixeli. În cazul în care aceeași masă să se uite la rezoluția de 1024 × 768, acesta va fi mai mare. Fiecare celulă va avea o lățime de 256 de pixeli, iar lățimea mesei este egală cu 1024 pixeli.

Fiecare metodă are avantajele și dezavantajele sale. Cu mese fixe mai ușor să lucreze cu ei, deoarece nu trebuie să vă faceți griji cu privire la schimbarea dimensiuni de masă pentru diferite vizitatorii paginii.

Toate elementele din tabel trebuie să fie complet descărcat înainte de browser-ul începe să le afișa. Dacă utilizați tabele fixe, proiectantul poate forța browser-ul pentru a începe afișarea datelor din tabel, fără să mai aștepte pentru o sarcină completă. Pentru a face acest lucru, utilizați următorul stil CSS:

Dezavantajul principal al utilizării tabelelor fixe este nefolosirea spațiului prețios la rezoluții de ecran mai mare.

Să ne întoarcem la tabelele relative, au nevoie de mai mult activitatea de designer. Trebuie să fie sigur că este afișată pagina web la fel de bine la rezoluții diferite. Dacă este făcută corect, pagina este extrem de scalabil și utilizează întreaga zonă de ecran. În cazul erorilor, formatarea paginii poate face aproape imposibil de citit.

Text: pixeli împotriva așezărilor

După cum sa menționat mai sus, pixelul este unitatea de bază de măsurare a rezoluției ecranului. Prin urmare, tot ceea ce are de a face cu dimensiunea monitorului, se crede, în pixeli. Unitatea de măsură standard pentru dimensiunea fontului este „punctul“. Inițial, acesta a fost utilizat în tipărirea și nu este destinat utilizării în rețeaua.

Recomandat citit 5 motive pentru a proiecta site-uri din Axure

Pentru un permis pentru a naviga?

Este dificil de a dezvolta un site cu un echilibru corect de formă și funcție care ar fi la fel de bine afișate pe o varietate de platforme. Acesta este unul dintre obiectivele principale ale designerului. Trebuie să fie sigur că schimbarea nu va afecta rezoluția impresia unui vizitator al site-ului.

Acum, s-ar putea întreba: „La ce rezoluție ar trebui să fie ghidată?“ Răspunsul depinde de audiența.

Statisticile site-ului pot fi utile pentru a determina soluția ideală pentru site-ul tau. Există alte surse care vor ajuta să ia această decizie. Pentru început, este util pentru a vedea rezoluția monitorului statistici.

dimensiune fixă ​​a site-ului împotriva relativă: fiecare metodă are avantajele și dezavantajele sale.

Fixe de proiectare mai ușor, deoarece acestea nu trebuie să vă faceți griji cu privire la redimensionare la diferite rezoluții de ecran.

Dezavantajul principal al utilizării siturilor fixe este nefolosirea spațiului prețios la rezoluții de ecran mai mare.

Care site-ul nu fix sau cauciuc? Rezolvarea acestei probleme cel mai bun stânga pentru profesioniști.

Acum, aspectul folosind tabele depășite. Motivele sunt clare: nu aspect semantic, pagina este supraîncărcat cu HTML-tag-uri, marfa lungi, care, de asemenea afectează în mod negativ rezultatele căutării.

Site-ul ar trebui să fie typeset folosind divs. În ceea ce privește aspectul folosind divs, puteți vedea un exemplu de liber CSS-șabloane. Pentru a limita lățimea ferestrei browser-ului utilizat de proprietate-lățime min pentru IE.