Astazi am realizat un tabel pentru un site care afisa rezultatul meciului online, cu actualizare automata. După finalizarea proiectului, am decis să-l testez ecran micși a fost foarte nemulțumit de rezultat.

În primul rând, întregul tabel nu se potrivește pe ecran, trebuie să derulați pagina de fiecare dată.

În al doilea rând, fonturile sunt prea mari părți diferite Mese.

Problema trebuia rezolvată prin conectarea mai multor fișiere de stil site la rezoluții diferite (*.css) pt rezoluții diferite.

Și acest lucru nu este deloc greu de făcut. Doar determinați rezoluția ecranului prin JavaScript și conectați-vă fișierul necesar stil.

Pentru început, în interiorul etichetei de cap, la sfârșit, adăugați liniile

( //La lățimea ecranului< 1280 if (screen.width < 1280) document.write (""); //иначе else document.write (""); }

Acum puteți crea o copie a fișierului main.css și îl puteți redenumi main1024.css. Acum, în acest fișier de stil puteți modifica toate elementele de dimensiunea fontului pentru a fi mai mici, de exemplu 1 punct. De asemenea, trebuie să redimensionați imaginile folosind parametrii lăţimeȘi înălţime.

În acest fel vă puteți conecta pentru diferite rezoluții de ecran, diferite css fișiere.

Exemplu de conectare a fișierelor de stil

( dacă (lățimea.ecranului