Ajustați site-ul dvs. web pentru a se potrivi cu toate rezoluțiile

Când proiectați un site web, unul dintre cele mai importante lucruri de reținut este să vă asigurați că pagina dvs. apare corect pe ecrane și dispozitive de toate dimensiunile. Acest lucru se poate face prin introducerea unei linii de cod în pagina dvs. care definește lățimea relativă a unei pagini sau prin furnizarea de valori de rezoluție minime și maxime.

Acest articol rapid vă va oferi sfaturi despre cum să vă asigurați că site-ul dvs. apare corect pe ecrane de toate dimensiunile .

Ajustați site-ul dvs. pentru a potrivi toate ecranele

Definirea lățimii relative a paginii este metoda recomandată atunci când vine vorba de designul paginii web datorită capacității paginii de a se adapta ecranelor de orice dimensiune. Prin definirea lățimii în procent, spre deosebire de numărul unității, construiți o anumită flexibilitate pentru fiecare piesă a paginii, permițându-i să crească sau să se micșoreze pe baza specificațiilor ecranului privitorului.

Definirea lățimii relative a site-ului se face prin intermediul etichetelor corporale . Această etichetă poate fi adaptată dacă folosiți un corp div #

 corp {lățime: 100%;} 

În acest exemplu, codul dictează că pagina dvs. de pe site-ul dvs. va lua 100% din fereastra, indiferent de mărimea ecranului de vizionare. Dacă doriți ca pagina dvs. să apară puțin mai mică, vă recomandăm să setați lățimea dvs. la nu mai puțin de 80% sau riscați ca conținutul dvs. să apară prea mic pe ecran. Dacă definiți o lățime mai mică, puteți focaliza ecranul folosind marja: auto .

Valoarea minimă sau maximă a lățimii

Proprietatea minimă sau maximă a lățimii poate fi utilizată și în timpul ajustării site-ului web pentru a se potrivi tuturor tipurilor de rezoluție. Este important de reținut însă că o lățime minimă nu este acceptată în Internet Explorer și că setarea unei lățimi maxime poate duce la o prezentare distorsionată dacă o pagină mai mică nu se potrivește unui ecran mai mare.

Iată un exemplu de site web care prezintă o lățime a paginii de 90%, centrată, cu o lățime minimă de 600 de pixeli și o lățime maximă de 2000 de pixeli:

 corp {lățime: 90%; margin: auto; min lățime: 600px; max-width: 2000px}