Cum să faci un site mobil responsabil în AJAX pentru programarea HTML5 și CSS3 - dummies

Dezvoltatorii web HTML5 și CSS3 pot utiliza AJAX pentru a crea un site mobil mobil. O modalitate de a face un site să funcționeze bine pe mai multe rezoluții este să furnizeze diferite reguli CSS pe baza tipului media detectat.

CSS3 are o caracteristică minunată nouă numită interogare media , care vă permite să specificați un tip de suport și să determinați diferite caracteristici ale afișajului. Puteți utiliza această specificație pentru a construi un subset al CSS care ar trebui folosit atunci când browserul detectează un anumit tip sau dimensiune de afișare.

Specificați un tip de suport media

Rulea @media vă permite să specificați ce tip de ieșire trebuie să modifice CSS-ul inclus. Cele mai obișnuite tipuri de materiale media sunt ecranul, imprimarea, vorbirea, dispozitivele portabile, proiecția și televizorul. Există mai multe, dar doar imprimarea și ecranul sunt acceptate universal.

De exemplu, următorul cod va specifica dimensiunea fontului atunci când utilizatorul imprimă documentul:

@media print {body {font-size: 10pt;}}

Acest CSS poate fi încorporat într- document, dar ar trebui, de obicei, să fie plasat la sfârșitul documentului, deoarece acesta deține excepții de la regulile normale. Puteți plasa cât mai mult cod CSS în interiorul elementului @media, dar trebuie să introduceți codul CSS care este relevant pentru situația specifică de care sunteți interesat.

Cum se adaugă un calificativ

Pe lângă specificarea tipului media, regula @media are un alt truc foarte puternic. Puteți aplica o condiție specială de calificare pentru mass-media.

Când browserul este mai mare de 500 de pixeli, puteți vedea textul negru pe un fundal alb. Dar face ecranul mai îngust și vedeți ceva interesant.

În mod normal, ați folosi acest truc pentru a schimba aspectul, însă începeți cu acest exemplu mai simplu de schimbare a culorii. Iată codul pentru acest exemplu mai simplu:

narrowBlack. html corp {culoare: negru; fundal-culoare: alb;} @media (max-width: 500px) {corp {culoare: alb; fundal-culoare: negru;}}

Demonstrație calificare
Încercați să redimensionați această pagină. Când pagina este mai mare de 500 de pixeli, textul este neagră pe un fundal alb.
Când pagina este mai mică de 500 de pixeli, culorile se inversează, oferind un text alb pe un fundal negru.

Iată cum puteți crea o pagină care să se adapteze la lățimea ecranului:

1. Construiți-vă site-ul ca de obicei.

   Acesta este un loc în care întreaga "conținut separat de aspect" lucru cu adevărat plătește off. Același cod HTML va avea două stiluri diferite.

2. Aplică un stil CSS în mod normal.

   Creați stilul dvs. standard în mod normal - deocamdată, încorporați stilul în pagină cu eticheta.Stilul dvs. principal ar trebui să se ocupe de cel mai comun caz. (De obicei, un desktop de dimensiune completă.)

3. Construiți o regulă @media.

   regula CSS pentru @media ar trebui să meargă la sfârșitul CSS normal.

4. Setați un calificativ de max-lățime: 500px.

   Acest calificativ indică faptul că regulile din acest segment vor fi utilizate numai dacă lățimea ecranului este mai mică de 500 de pixeli.

5. Plasați regulile de caz special în noul set de stil.

   Orice reguli CSS pe care le definiți în interiorul regulii @media vor fi activate dacă calificatorul este adevărat. Utilizați aceste reguli pentru a suprascrie CSS-ul existent. Rețineți că nu trebuie să redefiniți totul. Doar furnizați reguli care au sens în contextul dvs. particular.

6. Adăugați un port de vizualizare.

   Navigatoarele mobile vor încerca uneori să redimensioneze pagina astfel încât să poată fi văzute simultan. Acest lucru învinge scopul unui stil special, așa că utilizați metatag-ul pentru portul de vizualizare pentru a indica faptul că browserul ar trebui să raporteze lățimea sa adevărată. De asemenea, este adesea util să dezactivați scalarea paginilor, deoarece nu ar mai fi necesară.

În acest exemplu, browserul aplică întotdeauna stilul principal (text negru pe fundal alb). Apoi se uită la regula @media pentru a vedea dacă calificatorul este adevărat.

Dacă lățimea este mai mică de 500 de pixeli, calificativul max-width: 500px este evaluat la adevărat, iar întregul cod CSS din interiorul segmentului @media este activat. Browserul stochează apoi ambele seturi de CSS și aplică CSS corect pe baza stării regulii.