În Metrics, pentru unul dintre site-uri, am construit un raport pe un eșantion de 400.000 de vizitatori (Runet). Doar 60% dintre vizite s-au remarcat prin faptul că lățimea ferestrei browserului era în intervalul de 400px - 1300px. Puteți avea alte valori.
Se poate folosi "cauciuc", dar în limitele stabilite (proprietățile CSS min-width și max-width sunt înțelese de toate browserele moderne). Într-o astfel de gamă largă de ferestre de browser la nivel de client, aspectul aspectului adaptiv este unul bun.
În mod ideal, configurația adaptivă ar trebui să aibă 4 opțiuni de afișare, care corespund celor 4 tipuri de dispozitive de surfing web:
Numerele nu sunt canonice și corespund doar tendințelor tehnice în momentul de față. N-am găsit niciun standard pentru aspectul adaptabil. Valorile sunt luate de pe site-ul Bootstrap - aspect adaptiv al motorului bazat pe HTML5 și CSS3 (original - engleză).
Aceste cifre indicative ne vor permite să răspundem la întrebarea cerută la început.
Care este lățimea aspectului?
Dar răspunsul nu este unul, ci patru:
- ecranele mici - 95% din lățime;
- ecranele mici: - 750 pixeli;
- ecrane normale: - 970 pixeli;
- ecrane: - 1170 pixeli.
Aceste dimensiuni includ lățimea barei de derulare verticale și mici indentări la margini (nu sunt frumoase când conținutul se lipsește aproape de marginea ecranului).
Pe baza acestor valori, tragem concluzii despre lățimea coloanelor. Pe ecrane mici, coloana va fi una, va fi situată în centrul ecranului și va ocupa 95% din lățimea acesteia. Pe ecrane mici, decideți despre oportunitatea unei coloane suplimentare. Aș face o bara laterală îngustă (nu mai mult de 250 de pixeli). Pe ecrane normale și largi, puteți face o bara laterală extinsă (300px sau mai mult). Dacă câștigați pe AdSense. într-o astfel de bara laterală, un bloc verticale "gustos" de 300 × 600 se potrivește bine. Pe ecrane largi, puteți face 2 sidebras.
Cum se efectuează aspectul adaptiv?
Designul web adaptiv (engleza responsabilă în engleză) asigură citirea și lizibilitatea site-ului pe orice dispozitiv. Pe scurt, îmbunătățește gradul de utilizare. Cuvântul cheie "adaptiv" înseamnă că designul "se adaptează" dispozitivului pe care este afișat. Ie Site-ul arată diferit, dar cel mai potrivit pentru dispozitivul pe care este afișat.
HTML5 CSS3 Cadrele JS pentru aspectul adaptiv
Puteți utiliza cadrul de bootstrap de mai sus (sau orice altceva). În plus, este clar: proiectați doar, iar pentru încadrarea pe diferite dispozitive, cadrul este responsabil. contra:
- ia timp să stăpânească;
- aspectul se dovedește a fi supraîncărcat cu stiluri și scripturi, dintre care majoritatea nu veți folosi nici măcar;
- pe Internet există afirmații ambigue în contul browserului încrucișat al unei astfel de decizii.
CSS @media interogări
Cred că cea mai bună soluție este cea mai simplă. Pentru că am folosit interogările media opționale CSS. Sprijinul acordat de toate browserele moderne. Și pentru a sprijini browserele IE în versiunea 9, puteți folosi acest truc (adăugați la
):Interogările media în acțiune
De exemplu, am specificat reguli numai pentru #layout. Acesta este containerul
În cazul în care există o eliptică în cod, scrieți oricare dintre regulile CSS. În special, controlează dimensiunea fonturilor, indents, afișa și ascunde bara laterală, lățimea coloanelor și așa mai departe.
Principiul este următorul. În primul rând, browserul ia în considerare acele stiluri specificate în secțiunea de sus a fișierului CSS, pe care l-am numit "reguli implicite CSS". Apoi mergeți la construcția ecranului @media și (.). care va determina browserul să ia în considerare stilurile noi dacă este îndeplinită condiția de introducere a lățimii ecranului în intervalul specificat. Dacă utilizați un browser care nu acceptă interogări media (un caz rar), va ignora aceste instrucțiuni prin afișarea "regulilor CSS în mod implicit" (așa este tratat lipsa suportului pentru browserul încrucișat). Prin urmare, în mod prestabilit, am specificat o regulă corespunzătoare lățimii ecranelor obișnuite: lățimea aspectului este de 970 pixeli.
Cele de mai sus sunt suficiente pentru a începe să faceți o adaptare adaptivă. Restul pe care îl puteți folosi la discreția dvs. sau deloc.
Trucuri și subtilități ale aspectului adaptiv
Navigatorii de dispozitive mobile încearcă de obicei să se potrivească lățimii site-ului cu lățimea ecranului. Chiar dacă aspectul dvs. are o lățime de 1500 pixeli, browserul Android sau Chrome va ajusta dimensiunea site-ului astfel încât să se potrivească ecranului. Desigur, atunci când utilizați interogări media, puteți obține un rezultat neașteptat aici. Pentru a împiedica browserul să scaldeze site-ul, dacă gestionăm dimensiunea site-ului, noi trebuie să scriem
instrucțiunea:Și cum rămâne cu imaginile pe care le încărcați pe site la o lățime de 600 de pixeli? Cum să gestionați scara în timp ce reduceți coloana de conținut la 500px (de exemplu, pentru tablete)?
Este suficient în regulile generale să scrieți:
Apoi fotografiile nu vor lua mai mult de 95% din lățimea containerului în care sunt situate.
Zeroarea și normalizarea stilurilor predefinite
Atunci când faci orice design, trebuie să ții cont că fiecare browser are stiluri predefinite pentru multe elemente. De exemplu, chiar dacă nu specificăm nicio regulă CSS, antetele vor fi aldine și mari, va exista liniuță între paragrafe, citatul va fi afișat în caractere cursive și așa mai departe. Numai stilurile preinstalate ale diferitelor browsere diferă. Dacă scriem propriile noastre stiluri, completând cele preinstalate în browserul nostru, există o mare probabilitate ca într-un alt browser dintr-un alt sistem site-ul să arate diferit. Înainte de a vă scrie regulile CSS, stilurile presetate trebuie să fie resetate și normalizate (să conducă la o singură vizualizare). În acest scop am două fișiere CSS:
Conectez aceste fișiere la începutul stilului principal.css astfel:
Conversia meniurilor în listă pe ecrane mici
Apoi, în CSS, afișați pur și simplu una dintre opțiuni, în funcție de lățimea ecranului:
În acest exemplu, vă puteți ghici cum să efectuați alte substituții.
Conversați un aspect de două coloane într-o structură cu o singură coloană pe ecrane mici
Crearea unui aspect multi-coloană (cu o lățime fixă a barei laterale și a conținutului "cauciuc", cu două bare laterale etc.) este subiectul unui articol separat. Pentru simplitate, ca exemplu, propun un layout în două coloane.
Mai sus, am arătat deja reguli CSS adaptive pentru #layout - stratul în care este înfășurat conținutul. Nu voi complica codul cu repetare. Rețineți că codul de mai jos este înfășurat în stratul de aspect, iar aspectul descrie regulile CCS.
Noi numim coloana principală #content. și bara laterală #sidebar. HTML:
Principalul lucru este să plasați bara laterală sub conținut, astfel încât pe ecranele mici să fie afișată mai jos, nu mai mare. Și doriți să plasați bara laterală pe ecrane mari în stânga sau în dreapta - pentru aceasta răspunde CSS:
Aspectul în acest exemplu este o coloană din stânga cu lățimea de 70% și o bară laterală în dreapta, de 27% din lățime. Între ele, o distanță de 3% este suficientă pentru a nu "lipi împreună" vizual. Apropo, dacă credeți că este specificat procentul lățimii ferestrei, acest lucru nu este chiar adevărat. De fapt, acesta este procentul lățimii stratului părinte. După cum sa scris deja, în practică tot conținutul
înfășurat în stratul de aspect. astfel dacă setăm lățimea la 1000 de pixeli, conținutul va fi de 700 de pixeli, iar bara laterală va fi de 270 de pixeli.Trebuie să utilizați ceea ce vă convine. De exemplu, puteți specifica dimensiunea fontului în pixeli și distanța dintre linii: 1.5m, pentru a crea un interval și jumătate, astfel încât să nu suprascrieți această valoare dacă modificați dimensiunea fontului.
De regulă, este convenabil să specificați mărimea fontului de bază (de exemplu pentru corp) în px sau pt, iar restul în valori relative (de exemplu, 70% este egal cu 0,7). Apoi, în funcție de lățimea ecranului, va fi suficient să modificați mărimea fontului de bază astfel încât restul să fie ajustat automat.
Sentimentul de scriere a codului în articol dacă nu îl pot copia? Sau crezi că cineva o va reprima?
Micul fiu al tatălui său a venit și a întrebat: "RSS este bine, la urma urmei? Nu e rău? Nu am secrete, ascultă, copii. RSS uneori înlocuiește cărțile pentru mine
Titluri, etichete
arhivele de blog și calendarul se află în partea de jos a paginii. Pentru a nu mai lungi, trebuie să faceți clic pe link.
Povestea anilor buni
Acest widget, cred, este util doar pentru mine - să mă uit la posturile din trecut, să fiu stimulat să scriu mesaje noi
Nu găsiți nume ale unor rubrici stranii? Poate îmi vei oferi nume mai competente care ar reflecta aceeași esență în aceeași formă scurtă.
Articole similare
Trimiteți-le prietenilor: