Recent, tot mai multe tehnologii și diverse dispozitive (tablete, smartphone-uri, monitoare) sunt dezvoltate cu ajutorul cărora sunt vizualizate site-uri.
În domeniul căreia obținem o mare varietate de rezoluții diferite de ecran, ceea ce duce, la rândul său, la dificultatea de a obține informații de pe site-uri. Pentru a face informațiile bine citite și ușor de vizualizat pe majoritatea dispozitivelor, a fost dezvoltată tehnologia de design adaptiv.
Scopul designului responsive este de a dezvolta un design universal de site web, care, la rândul său, vă va permite să vizualizați și să interacționați cu resursa de pe diferite dispozitive.
Și, de asemenea, această tehnologie implică dezvoltarea unei versiuni a site-ului web pentru toate dispozitivele, și nu mai multe.
Design web responsive(English Adaptive Web Design) - design de pagini web care asigură afișarea corectă a site-ului pe diverse dispozitive conectate la Internet și se ajustează dinamic la dimensiunile date ale ferestrei browserului.
Principiile de bază ale designului receptiv:
- Șablon de site responsive, capacitatea șablonului de a se adapta la diferite rezoluții de ecran ale dispozitivelor de la un monitor de computer la un smartphone;
- Adaptarea și mutarea blocurilor de conținut, capacitatea blocurilor de conținut, în funcție de rezoluția ecranului a dispozitivului, de a lua dimensiunile necesare, precum și capacitatea de a se muta într-o altă poziție în aspect;
- Adaptarea imaginilor, capacitatea imaginilor de a redimensiona în funcție de rezoluția ecranului sau de a încărca o imagine mai adaptată cu greutate și dimensiune mai reduse;
- Folosind plasă flexibilă, vă permite să schimbați rapid designul aspectului;
- Ascunderea blocurilor mai puțin importante, pe ecranele mici, unele blocuri pot fi ascunse;
- Reproiectarea gradului de utilizare a elementelor de navigație, deoarece pe dispozitivele mobile, din cauza rezoluției scăzute, elementele de navigare devin mai puțin clicabile, acestea sunt reluate, făcându-le comod de utilizat;
- Simplificarea unui număr de elemente dintr-o pagină web, unele elemente sunt simplificate pentru utilizare pe dispozitive mobile;
- Adaptarea conținutului video, ar trebui să luați în considerare și adaptarea videoclipului;
- Utilizarea interogărilor media(interogare media), vă permit să creați un aspect receptiv;
- În primul rând mobil(în primul rând mobil), proiectarea design-urilor receptive începe cu o machetă pentru dispozitive mobile.
În ceea ce privește ultimul punct, dacă este corect sau nu este o întrebare dificilă, cel puțin mulți susțin că este necesar să începem dezvoltarea unui layout cu o versiune pentru dispozitive mobile. Aderă la o vedere puțin diferită, îmi este mai ușor să dezvolt un layout pentru rezoluția maximă cu o grilă bine gândită și funcționalitate completă și abia apoi să o adaptez la alte rezoluții.
Dimensiuni de aspect de design receptiv
Cu ceva timp în urmă, în 2012, am scris un scurt articol despre care să alegeți atunci când dezvoltați un design - un aspect al unui site fix. Acest articol a primit mult interes în rândul cititorilor, se dovedește că această problemă este de interes pentru mulți designeri și dezvoltatori începători. În acest sens, în acest articol am decis să subliniez și această problemă.
Deci, pur din propria mea viziune, voi sublinia principiul și dimensiunile pentru care ar trebui dezvoltat aspectul.
Dacă urmați mai întâi principiul mobilului, atunci vor exista astfel de dimensiuni de rezoluții pentru care este necesar să dezvoltați un aspect 320px / 480px / 768px / 1024px / 1280px poate depinde mai mult de sarcini.
Imaginea arată cam așa, dar adesea pentru o anumită rezoluție nu este nevoie să creați un aspect, de exemplu, pentru 480px. dacă aspectul nu se întrerupe între ele 768 - 320px.
Desigur, vom crea o pânză în Photoshop ținând cont de umplutură, bare de defilare și orice altceva, la fel ca un aspect obișnuit. pentru ușurință de dezvoltare, precum și pentru un design mai rapid al aspectului. Mulți oameni folosesc cadre în munca lor și, prin urmare, se bazează pe grila cadrului pe care se dezvoltă.
Datorită acestui fapt, vom putea arăta designerului de aspect cum se va comporta aspectul pe diferite rezoluții de ecran și dispozitive. De exemplu, am schițat un aspect mic, îl puteți vedea în captura de ecran de mai jos. 
Interogare media și fereastră de vizualizare în design responsive
Pentru a spune browserului cum să afișeze dimensiunea paginii și să-și schimbe scara, este folosită metaeticheta viewport. Această metaetichetă este scrisă în site-ul. Permite dezvoltatorilor să seteze lățimea ecranului pentru dispozitive, care este scrisă în css.
Metaeticheta viewportului este scrisă astfel:
- lățime = lățime-dispozitiv- înseamnă că lățimea paginii site-ului este setată în conformitate cu lățimea ecranului dispozitivului.
- scară inițială = 1,0- acest atribut va spune browserului să seteze o corespondență la scară 1: 1 pentru pixeli, ceea ce înseamnă să nu se scaleze.
Stânga fără metaetichetă, dreapta folosind metaeticheta viewport.
De asemenea, pot fi setate alte atribute și parametri pentru metaeticheta.
Interogări media
CSS3 joacă un rol major în dezvoltarea site-urilor web receptive mass-mediaîntrebări(interogări media). Interogările media includ tipul media (imprimante, smartphone-uri, ecrane, televizoare, proiectoare etc.) și condiții, care pot fi adevărate sau false (adevărate, false). Se vor aplica diferite stiluri CSS, în funcție de dacă tipul media este corect și dacă condiția este îndeplinită. Dacă este adevărat, atunci stilurile specificate în această interogare media vor fi aplicate, dacă este fals, atunci se vor aplica stilurile obișnuite CSS.
Datorită unor astfel de solicitări, sunt create diverse afișaje ale site-ului, pentru ecrane de mobil, tabletă și monitor. Sprijinit de toate browserele moderne.
Este scris astfel:
Ecran @media și (lățime maximă: 1000px) (.class (proprietate: valoare;))
- @mass-media- interogare media;
- ecran- media - tip (numit și tip media);
- lățime maximă: 1000px- condiția care trebuie îndeplinită (în cazul nostru, stilurile vor fi aplicate dacă lățimea ferestrei este mai mică de 1000px);
- . clasă- se înregistrează selectoarele corespunzătoare (clase, id) în care se atribuie noi valori proprietăților.
În cele mai multe cazuri, următoarele caracteristici media sunt utilizate pentru a dezvolta design-uri receptive.
- max-width: latime- înseamnă că dacă lățimea ferestrei browserului este mai mică decât lățimea specificată, atunci condiția este îndeplinită și se aplică stilurile corespunzătoare (exemplu: max-width: 768px, înseamnă că dacă lățimea ferestrei browser este mai mică de 768px , atunci trebuie folosite stilurile specificate în cererea media).
- min-width: latime- înseamnă că dacă lățimea ferestrei browser este mai mare decât lățimea specificată, atunci condiția este îndeplinită și stilurile specificate sunt aplicate în cerere (exemplu: min-width: 480px).
Dar pot fi folosite și alte funcții: culoare, lățime dispozitiv, grilă, înălțime, orientare: peisaj, orientare: portret, rezoluție și altele.
Valorile care sunt utilizate în funcțiile media sunt, de asemenea, denumite puncte de întrerupere(puncte de basculanță sau puncte de control). La aceste puncte de întrerupere, ați ghicit, designul site-ului se schimbă.
- 320px- mobil
- 480px- mobil
- 768px- tablete
- 1024px- tablete, netbook-uri
- 1280pxși mai mult - computere personale.
Este posibil ca punctele de control să nu fie legate rigid de o anumită rezoluție a ecranului, deoarece pot fi create cu parametri diferiți în acele valori în care aspectul este vizibil rupt, afișat incorect și nu mai este afișat corect.
Operatorii logici sunt utilizați și în interogările media, cum ar fi:
- și- ȘI logic, folosit pentru a combina mai multe condiții (exemplu: @media print și (color) (...)).
- nu- NOT logic, folosit pentru a anula o condiție (exemplu: @media not all și (culoare) (...)).
- numai- folosit pentru browsere mai vechi care nu acceptă interogări media (exemplu: ecran @media only și (lățime maximă: 1300px) (…)).
Interogările media sunt scrise la sfârșitul foii de stil, după toate stilurile css principale.
Cum să faci un design web receptiv dintr-un aspect fix
Deci, să presupunem că aveți o temă de site cu dimensiune fixă pe care ați dori să o păstrați și să faceți un aspect receptiv, dar nu știți de unde să începeți. În continuare, vă voi spune cum se poate face acest lucru, dacă se poate face deloc și ce trebuie făcut, de unde să începeți.
- În primul rând, facem o copie de rezervă a șablonului (temei), pentru orice eventualitate.
- În continuare, avem nevoie de un program pentru editarea css, poate fi orice editor de cod, de exemplu paranteze din adobe, este gratuit sau Notepad ++.
- Și, de asemenea, browserul google chrome, cu inspectorul său de cod (numit prin tasta F12).
În continuare, să începem editarea, pentru comoditate, puteți transfera șablonul în Denver (server local) sau într-un subdomeniu, deoarece este mai convenabil pentru oricine, astfel încât utilizatorii să nu vadă toate editările care vor avea loc cu aspectul. În primul rând, să adăugăm metaeticheta viewportului, am scris despre asta mai sus așa cum este recomandat. 
În continuare, trebuie să convertim toate unitățile de măsură statice în unități relative.
Acestea sunt px, trebuie să le traduceți în% și să setați fonturile la em. Acest lucru se referă în principal la lățimi și fonturi.
Lăsați lățimea învelișului principal al containerului (max-width: 960px;) neschimbată, dacă este scrisă, modificați lățimea la max-width. Pentru restul containerelor, vom schimba lățimea în raportul %. Vom traduce după formula:
Dimensiunea containerului (px) / dimensiunea containerului principal (părinte) în (px) * 100% = rezultat (%)
De exemplu, un container de corp de site static este de 720 px, dimensiunea containerului principal (părinte), de exemplu, standardul de 960 px, apoi obținem următorul 720/960 * 100 = 75%. 
Astfel, vom converti aspectul nostru static într-unul de cauciuc. În continuare, ne vom traduce fonturile, dacă sunt în px v ei pentru a face acest lucru, din nou, utilizați formula:
Dimensiunea fontului (px) / 16px (dimensiunea standard) = dimensiunea fontului (em)
De exemplu, dimensiunea fontului este 32px, apoi 32/16 = 2em. 
Apoi vom face imaginile noastre receptive. Pentru a face acest lucru, vom scrie următoarele proprietăți și valori în css.
Imagine (lățime maximă: 100%; înălțime: automată;)
Această metodă adaptează bine pozele, singurul lucru că nu reduce greutatea pozelor, ceea ce înseamnă că imaginile cu o greutate mare vor fi încărcate pe dispozitivele mobile. Pentru a evita acest lucru, este necesar să încărcați diferite imagini în funcție de dimensiunea ecranului.
După ce ați făcut toate aceste modificări, dacă ați făcut totul corect, atunci nimic de pe site nu ar trebui să se schimbe, iar dacă încercați să reduceți ferestrele browserului, designul și imaginile ar trebui să se micșoreze.
Ei bine, acum baza noastră este gata, acum este necesar să stabilim punctele de control în care layout-ul va fi reconstruit, să ne gândim la modul în care se vor comporta blocurile, ce vom ascunde și să înregistrăm totul în interogări media. Vom determina chiar aceste puncte de bascule folosind browserul Google Chrome.
Să deschidem aspectul în el, apăsați tasta F12și vom reduce dimensiunea ferestrei browserului. În colțul din dreapta sus, vom scrie dimensiunea ferestrei, ne interesează prima valoare, indică lățimea. Este necesar să se micșoreze până când designul nu mai este afișat corect. La dimensiunea în care aspectul nu pare corect, vom crea un punct de întrerupere. 
După ce am identificat primul punct de inflexiune, îl vom scrie în fișierul style.css la sfârșit, după toate stilurile principale. Să presupunem că aspectul nostru are o bară laterală din stânga și o parte de conținut cu anunțuri, iar la 910px, site-ul începe să se afișeze incorect. În acest caz, vom înregistra următoarea interogare media.
@media numai ecran și (max-width: 910px) (/ * facem conținutul parțial la lățime completă, anulăm alinierea * / secțiune (lățime: 100%; float: none;) / * facem și bara laterală lățime completă, anulați alinierea * / deoparte (lățime: 100%; float: niciunul;))
Dacă aceste blocuri au margini, umplutură, acestea ar trebui fie puse la zero, fie luate în considerare atunci când scrieți lățimea. De exemplu, umplutura: 2%; atunci lățimea se va scrie după cum urmează latime: 96%;.
Așa că ne-am adaptat aspectul la mai puțin de 910 px. Dacă fereastra browserului este mai mică de 910 px, atunci conținutul va deveni lățime completă, iar bara laterală va cădea sub partea de conținut și va deveni, de asemenea, lățime completă.
După același principiu, creăm restul punctelor de control, găsim lățimea la care se rupe aspectul (nu pare corect), notăm interogarea media, formăm stiluri pentru aceasta, setăm lățimea blocurilor, putem ascunde blocuri mai puțin importante ( display: niciunul).
După cum ați observat, în acest exemplu, punctele de întrerupere nu vor fi atașate rigid de dimensiunile ecranului, ceea ce garantează, la rândul său, o bună afișare a site-ului pe diverse dispozitive, indiferent de rezoluția acestora.
Va trebui să muncești din greu, dar rezultatul nu va întârzia să apară și vei putea realiza în mod independent un design de site responsive dintr-un aspect fix.
Ei bine, asta pare să fie tot ce am vrut să spun în acest articol, am vrut să scriu puțin despre design responsive, dar s-a dovedit a fi destul de voluminos, sper că materialul vă va fi de folos.
Salutare tuturor! Recent, uitându-mă la statisticile unuia dintre proiectele mele, mi-am dat seama că este timpul să învăț cum să creez un design de site web responsive, adică un design care să arate bine atât pe computere și laptopuri staționare, cât și pe dispozitive mobile. Vedeți singur, indicii Metrica.
Cum iti place aceasta poza? Poate că, în unele subiecte, procentul de trafic mobil va fi mai mic, în altele va fi mai mare, dar, în orice caz, nu mai este posibil să ignori vizitatorii care te citesc de pe un smartphone sau tabletă.
Știți cum văd utilizatorii de dispozitive mobile site-ul dvs.? Din fericire, există un serviciu excelent pentru verificare - responsinator.com
Totul aici este revoltător de simplu - introduci adresa site-ului web și vezi cum arată pe dispozitivele mobile. Să verificăm un blog cu care probabil toată lumea este familiarizată ca exemplu.
Alexander Borisov are un șablon frumos, puteți vedea imediat că banii au fost investiți în design și aspect, și nu puțini bani. Cu toate acestea, este foarte incomod să citești un blog de pe telefon și nu m-aș mira dacă rata de respingere în rândul utilizatorilor de telefonie mobilă este mult mai mare decât a celor care vizitează site-ul de pe computer.
Ce să fac? Există două căi de ieșire: lăsați totul așa cum este și urmăriți cum alte proiecte ocolesc pe ale dvs. în rezultatele motoarelor de căutare sau faceți designul site-ului dvs. web receptiv.
Ce este designul responsive
La început, nu am văzut diferența dintre layout-urile responsive și fluide, când dimensiunea blocurilor se modifică în funcție de lățimea ecranului. Cu toate acestea, există o diferență.
Designul receptiv nu se întinde sau se micșorează doar în lățime, ci se ajustează pentru a se potrivi cu ecranul, schimbând uneori complet stilul cutiilor.
Cel mai simplu exemplu: zona de conținut este întinsă pe toată lățimea ecranului, iar bara laterală fie este mutată în jos, fie dispare complet din pagină. Sau meniul se transformă de la orizontală obișnuită într-o listă derulantă.
Cum să faci un design responsive pentru site-ul tău
Pot exista mai multe opțiuni, în funcție de bugetul și cunoștințele dvs. de CSS/HTML.
Comandați un aspect responsive de la un freelancer
Cea mai corectă, după părerea mea, opțiunea și este și cea mai nepopulară. Pentru că plăcerea nu este ieftină. Și totuși, dacă fondurile permit și nu există dorința de a înțelege complexitățile aspectului, este mai bine să găsești un studio sau un freelancer care să-ți adapteze șablonul pentru dispozitive mobile sau să creeze unul nou. Și știți deja cum să-i verificați funcționarea pe dispozitive cu diferite rezoluții - responsinator.com pentru a vă ajuta.
Găsiți un design finit
În ultimul timp, aproape toți designerii au încercat să-și adapteze șabloanele pentru dispozitivele mobile. Puteți căuta un design gata făcut, de exemplu, aici:
- www.templatemonster.com este una dintre cele mai populare colecții de șabloane plătite pentru diferite CMS și doar site-uri HTML.
- www.templatemo.com - O mulțime de opțiuni gratuite de design modern.
Această opțiune este potrivită pentru cei care nu urmăresc un design exclusiv sau care pot face propriile modificări ale codului pentru a face șablonul unic.
Utilizați cadre
Cadru (cadru) - puteți spune scheletul șablonului, fișierele sale principale și grila de blocuri. Designerii le iubesc pentru ușurința în utilizare și economisirea de timp, deoarece „peștele” gata făcut al șablonului vă permite să nu pierdeți timpul cu rutină. Dacă știți să lucrați cu cadre, folosirea acestora pentru a crea design-uri receptive este o soluție excelentă.
Veți găsi o listă uriașă de cadre responsive pentru fiecare gust pe Habré. Dar cele mai multe dintre ele sunt destul de greu de folosit și grele ca volum. Prin urmare, pentru cei care iubesc minimalismul, recomand o altă listă de cadre responsive ușoare de la Beloweb.com. În același timp, aruncați o privire mai atentă pe blog, există o mulțime de „dulciuri” utile pentru designeri și designeri de layout.
Faceți singur aspectul
Această metodă este pentru cei care nu caută modalități ușoare și doresc să-și dea seama singuri. Practic, pentru ca șablonul să fie receptiv, trebuie să utilizați două lucruri:
Metaeticheta viewportului
Care determină tipul de dispozitiv de pe care vizitatorul a intrat pe site și setează lățimea corectă a ecranului. Doar copiați acest cod în capul site-ului dvs.
@Regula media
Datorită căreia putem scrie stiluri diferite pentru aceleași blocuri în fișierul nostru css. Arata cam asa:
#stânga (lățime: 600 px; float: stânga; margine-dreapta: 10 px;) #right (lățime: 400 px; float: dreapta;) Ecran numai pentru media și (lățime maximă: 1010 px) (#stânga, #dreapta (lățime) : 98%; float: niciunul; marjă: 10px automat;))
În acest exemplu, blocul #stânga are 600 de pixeli lățime și va fi poziționat în stânga blocului #dreapta 400 pixeli latime. Dar dacă rezoluția monitorului este mai mică de 1010 pixeli, scoatem ambalajul din ambele casete și le întindem la 98% din lățimea ecranului.
Și în acest fel, trebuie să scrieți regulile pentru următoarele dimensiuni de ecran:
- 320px pentru iPhone 3-5 vertical
- 480px pentru iPhone 3-4 pe orizontală
- 568px pentru iPhone 5 pe orizontală
- 384px pentru smartphone în poziție verticală
- 600px pentru smartphone în poziție orizontală
- 768px pentru iPad în poziție orizontală
- 1024px pentru iPad vertical
O listă completă de rezoluții poate fi găsită pe responsinator.com sau în raportul Yandex.Metrica pentru site-ul dvs. (secțiunea Tehnologii / Rezoluții de afișare). Într-un cuvânt, pentru cei care sunt familiarizați cu aspectul site-urilor, nu va fi greu de înțeles această problemă.
Știi, rareori fac link la cursuri plătite (pentru că nu recomand niciodată ceva pe care eu nu l-am folosit niciodată), dar acesta este într-adevăr cel mai bun tutorial de layout pe care l-am urmărit vreodată. Datorită lui Mikhail, șablonul meu de blog este acum nu numai adaptat la diferite rezoluții de ecran, ci a devenit mai ușor decât versiunea anterioară și este mai bine optimizat pentru motoarele de căutare.
Apropo, dacă citiți un articol de pe telefonul mobil, scrieți, totul este la locul lui, este totul convenabil? Și asta e tot pentru azi. Dacă aveți întrebări sau completări - bine ați venit la comentarii, acestea sunt, ca de obicei, deschise tuturor.
Prezența designului responsive este o necesitate - viața a dovedit-o cu propriul său rake, niciun Joomla mobil nu oferă un efect precum adaptarea directă a site-ului. Astăzi vă voi arăta cum să realizați un design receptiv prin editarea stilurilor CSS folosind capul și degetele. Nu va fi posibil să sortați totul pe rafturi, deoarece fiecare șablon are nuanțe, dar voi da impulsul pentru a începe adaptarea.
Adaptare desktop
Mai întâi, facem adaptarea pentru desktop. Aceasta este etapa de bază, de la care apoi încep dansurile cu tamburin. Mulți oameni percep lumea în mod eronat, crezând că nu au probleme cu afișarea site-ului pe computere obișnuite, deoarece șablonul a fost alcătuit de cineva și arată exact la rezoluția normală. La rezoluția monitorului tău, da, dar ca pe un ecran mai mare, cum arăți cu absolut și pixeli pe un ecran cu o rezoluție de 1920x1080? Scopul adaptării designului este afișarea normală a site-ului pe mobil și absența jamburilor pe ecrane mari.
Ce facem? Principalul lucru este să traduceți toate valorile mari în css-ul șablonului din pixeli (px) în procente (%). Există câteva reguli aici:
- - Schimbați px în% numai pentru valori mari, nu este necesar să schimbați 5 px în 1% (de exemplu),
- - Faceți toată munca prin Firebug, apoi transferați valorile în viața reală.
Un pic pentru o înțelegere generală. Aveți un site în care lățimea paginii este de 1000 px, are trei blocuri - unul central de 800 px și două bare laterale de site de 100 px fiecare. Aceasta înseamnă că după înlocuire cu procente, dimensiunea paginii va deveni 100%, containerul central va fi de 80%, iar blocurile laterale vor fi de 10% fiecare. Aspru, dar de înțeles. Acum puțin mai multe detalii.
Înainte de adaptare (am salvat vechiul fișier CSS pentru istorie), containerul principal a fost scris în stilurile astfel:
#container (marja: 0 auto; lățime: 1100px; ...
După adaptare, a devenit așa:
#container (marja: 0 auto; latime: 77%; overflow: ascuns! important; ...
Meniul de sus s-a schimbat din:
Top-meniu> ul> li ul (lățime: 155px; ...
Top-meniu> ul> li ul (lățime: 90%; ...
Iar offset-ul blocului de conținut este implementat cu:
#conținut (marja: 0 220px; ...
#conținut (marja: 0 20% ...
Atenție la cod:
preaplin: ascuns! important;
Le folosim pentru a elimina derularea orizontală, acest lucru este util pentru adaptarea mobilă, uneori are sens să indicați doar interzicerea defilării orizontale folosind:
overflow-x: ascuns! important;
Efectuați toate lucrările prin Firebug sau inspector Google, verificați cu ochii - site-ul ar trebui să arate la fel după transferul px la%. Nu puteți comprima încă ecranul, nu am ajuns încă la adaptarea mobilă, în timp ce am făcut munca de bază pentru ecrane mari.
CSS pentru dispozitive mobile
Baza a fost creată, apropo, aceasta este cea mai dificilă etapă, acum trebuie să vă asigurați că site-ul este afișat corect pe toate dispozitivele mobile. Manipulările anterioare nu sunt suficiente, deoarece nu va funcționa să comprimați totul în procente sub un ecran mic. De acord, este imposibil să vezi bara de site la 10% pe un smartphone la o rezoluție de 320 px.
Va trebui să folosim @media screen și, care aduce modificări stilurilor pentru dispozitive la o anumită rezoluție. Am stabilit mai întâi micșorând ecranul browserului la ce rezoluție aveam probleme de afișare. Îngustând ecranul, am găsit punctul meu de „curbură”, acesta începe de la o lățime de 1000px, așa că trebuie să scrieți stiluri mobile de bază de aici - tot ce va fi afișat mai mult în stilurile unui desktop obișnuit, care este mai puțin în stiluri separate.
Exemplu ecran @media și
Am scris CSS pentru dispozitive mobile pe șablonul Joomla 1.5 astfel:
@media ecran și (max-lățime: 500px) (corp, tbody (-moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;)
Ecran @media și (lățime maximă: 400 px) (td (despărțire de cuvinte: break-all;)
Ecran @media și (lățime maximă: 1000 px) (td (despărțire cuvinte: break-all;) .page-numbers, #footer, #navigation, # header, .logo, .nav-box (afișare: niciunul! important ;) #conținut (poziție: automat; lățime: 80%; margine-jos: 0; margine-stânga: 10%; margine-dreapta: 20%;) #container (lățime: 90%! important;) .content-box (lățime: 110%) .content-box h1 (dimensiune font: 130%;) .content-box h2 (dimensiune font: 110%;) .content-box h3 (dimensiune font: 120%;) .conținut -box h4 (font-size: 100%;) .top-menu> div (padding-right: 0px! important;) img (max-width: 96%! important; height: auto! important;)
Câteva detalii despre cod.
Când lățimea ecranului este mai mică de 1000 px, barele laterale ale site-ului, antetul, paginarea și subsolul nu mai sunt afișate. IMHO meu - nu sunt necesare în versiunea mobilă. Acesta este ceea ce face codul:
Numerele paginilor, #footer, #navigation, # header, .logo, .nav-box (afișare: niciunul! Important;).
În mod implicit, în Joomla mobil 3 și versiuni ulterioare, blocurile laterale coboară, întinzând pagina până la o rușine, așa că pe noile motoare puteți modifica ceva cu mânere.
De asemenea, alte valori sunt indicate pentru blocurile containerului principal și fereastra de conținut, iar ieșirea H1-H4 este convertită în procente (pentru desktop, pixelii sunt bine pentru mine). Au fost făcute modificări la afișarea meniului de sus (dintr-un motiv întemeiat, trebuie redus la minimum, dar acest lucru nu este critic și o voi face mai târziu) și afișarea imaginilor a fost schimbată:
img (latime maxima: 96%! important; inaltime: auto! important;).
Pentru ei este indicat ca dimensiunea maxima a imaginii in latime este de 96% (cu marginile frumos), iar inaltimea este automata.
Specificul s-a terminat, încă o dată în sensul general al adaptării site-ului (design) prin CSS.
- - Modificați valorile px mari cu%,
- - Ne înregistrăm separat @media ecran și pentru dispozitive mobile.
Prin ecranul @media și, asigurați-vă că închideți blocurile care nu sunt necesare pentru mobil pentru afișare, dar traduceți în% acele valori care sunt afișate incorect, deoarece au fost lăsate în pixeli în versiunea desktop a CSS.
Drept urmare, ușurința de utilizare atunci când lucrați cu Joomla Mobile a fost de 65-70%, cu design responsive în CSS a devenit 99%. Concluzii pe față - Yandex și Goole nu au fost testați pentru adaptabilitate, acum merg cu brio.
Este destul de ușor să faci un șablon de site web receptiv, dar păstrarea elementelor în echilibru în toate punctele schimbării șablonului este o adevărată artă. Acest tutorial prezintă 5 tehnici de utilizat în CSS pentru un aspect receptiv. Există proprietăți CSS foarte de bază, cum ar fi lățimea minimă, lățimea maximă, overflow și valorile relative, dar toate joacă un rol important în design-urile receptive.
1. Video responsive
Acest truc CSS permite videoclipului încorporat să se întindă pentru a se potrivi limitelor.
Video (poziție: relativă; padding-bottom: 56,25%; înălțime: 0; overflow: ascuns;) .video iframe, .video object, .video embed (poziție: absolut; sus: 0; stânga: 0; lățime: 100% ; inaltime: 100%;)
2. Lățimea minimă și maximă
Proprietatea max-width vă permite să setați lățimea maximă a unui element. Ar trebui folosit pentru a preveni extinderea elementului dincolo de anumite limite.
Un container cu o proprietate max-width
Exemplul de mai jos definește o dimensiune a containerului de 800 px, dar stabilește o limită de dimensiune a chenarului de 90%.
Container (lățime: 800px; lățime maximă: 90%;)
Imagine receptivă
Puteți face o imagine redimensionată automat la dimensiunea maximă folosind lățimea maximă: 100% și înălțimea: proprietăți automate.
Imagine (lățime maximă: 100%; înălțime: automată;)
Codul de mai sus pentru imaginea receptivă funcționează în IE7 și IE9, dar nu funcționează în IE8. Pentru a remedia situația, adăugați width: auto property. Puteți folosi o regulă CSS condiționată special pentru IE8 sau următorul truc pentru IE:
@media \ 0screen (img (lățime: auto; / * pentru ie 8 * /))
Proprietatea lățimii minime
Proprietatea min-width este opusul proprietății max-width. Setează lățimea minimă posibilă a elementului. Mai jos este un exemplu de utilizare a proprietății min-width pentru a preveni ca câmpul de intrare să devină prea mic pe măsură ce micșorați.
3. Valori relative
Într-un aspect receptiv, utilizarea valorilor relative poate simplifica foarte mult codul CSS și poate îmbunătăți aspectul designului.
Câmpuri relative
Mai jos este un exemplu de comentarii care folosesc lățimea relativă a marginii din stânga pentru a indenta structura arborescentă. În loc de o valoare absolută în px, se folosește un procent pentru următorul nivel din listă. În partea stângă a figurii, puteți vedea că pe dispozitivele mobile, spațiul disponibil pentru elementele din listă poate deveni insuficient pentru afișarea normală dacă sunt utilizate valori absolute.
Dimensiunea relativă a fontului
Folosind valori relative pentru dimensiunea fontului (em sau%), puteți obține cu ușurință modificări corespunzătoare în înălțimile liniilor și dimensiunile de umplutură atunci când adaptați șablonul la ecranul dispozitivului. De exemplu, toate elementele legate sunt redimensionate automat atunci când sunt setate noi dimensiuni de font pentru elementul părinte.
Indentare relativă
Următoarea figură demonstrează beneficiile utilizării unei valori relative % pentru umplutură. Caseta din stânga are spațiu dezechilibrat atunci când se aplică valori absolute px. Blocul din dreapta are un aspect grozav, cu umplere proporțională de conținut.
4. Debordarea: truc ascuns
Puteți folosi proprietatea de overflow pentru a preveni curgerea textului în jurul unui element. O modalitate foarte simplă și utilă. Puteți anula împachetarea textului în jurul elementului anterior și puteți menține structura conținutului.
Proprietatea max-width ajută la încadrarea textului care nu poate fi spart (cum ar fi o adresă URL lungă) pe mai multe linii în loc de doar una.
Despărțire-cuvânt (înfășurare cuvânt: ruptură-cuvânt;)
Traducerea articolului extrem de valoros „Responsive Web Design Techniques, Tools and Design Strategies” al popularei publicații online pentru dezvoltatori Smashing Magazine.
În ianuarie, am publicat un articol despre design responsive, „Responsive Web Design: What It is and How To Use It”. Designul web responsive continuă să atragă multă atenție, dar având în vedere cât de diferit este de metodele tradiționale de dezvoltare a site-urilor web, poate părea copleșitor de dificil pentru designeri și dezvoltatori care nu l-au încercat.
Din acest motiv, am compilat o prezentare generală a resurselor care sunt utile la crearea site-urilor responsive. Revizuirea include ghiduri detaliate, abordări, instrumente, articole care conțin sfaturile practice de care aveți nevoie pentru a vă crea propriul site web receptiv.
Tehnici de design web responsive
1. Tranziții CSS și interogări mediaTranziții CSS și interogări media
Elliot Jay Stocks detaliază metoda de combinare a interogărilor media CSS și a tranzițiilor CSS. Ideea de bază este următoarea: atunci când dezvoltați un site receptiv folosind Media Queries, schimbați în mod constant lățimea browserului pentru a vedea cum se comportă site-ul în timp ce faceți acest lucru. Dar de fiecare dată când rulează una dintre interogările dvs. media, vedeți o tranziție grea între stiluri (primul, de exemplu, pentru desktop-uri, al doilea pentru tablete). De ce să nu folosiți tranzițiile CSS pentru a netezi acele tranziții grele cu animație?
Imagini și videoclipuri responsive
5. Imagini fluideImagini cauciucate (scalarea browserului)
Imaginile cauciucate sunt una dintre temele centrale în designul web responsive. Consultați articolul lui Ethan Marcotte pentru o prezentare detaliată a modului de creare a acestora cu fragmentul de cod clasic img (lățimea maximă: 100%;), precum și toate piesele necesare pentru a începe.
E-mailuri receptive
14. Optimizarea dvs. de e-mail pentru dispozitive mobile cu media QueryOptimizarea e-mailului pentru dispozitive mobile cu interogări media
E-mailurile mari necesită adesea derulare orizontală pentru a le vizualiza, mai ales când e-mailul are atașată o imagine mare. În acest studiu, Campaign Monitor explică modul în care e-mailurile pot fi optimizate pentru utilizarea dispozitivelor mobile Interogări mediași a sugerat câteva metode utile și fragmente de cod de utilizat în practică.
Instrumente de design web responsive
Puteți proiecta design adaptiv de la zero sau utilizați instrumentele enumerate mai jos pentru a accelera și simplifica procesul de creare.Acesta este un Polyfill rapid și ușor (un fragment de cod care adaugă funcționalități neacceptate de browser) creat de Scott Jehl pentru a suporta proprietățile de lățime minimă și lățime maximă ale interogărilor media CSS3 în IE6-IE8 și mai sus.
Utilizați informațiile din acest mic instrument pentru a crea un site web receptiv.
Un instrument pentru prototiparea rapidă a designului receptiv. Puteți proiecta CSS pentru diferite dimensiuni de ecran, orientări și browsere populare, fie că este vorba de telefoane (BlackBerry Torch, Google Nexus One, iPhone, Motorola Droid), tablete (BlackBerry Playbook, iPad, Samsung Galaxy Tab, Dell Streak), monitoare sau televizoare (720p, 1080p).
Puteți vizualiza rezultatele designului direct în browser și puteți utiliza instrumentele de dezvoltare cu care sunteți familiarizat, cum ar fi Firebug. Încercați și instrumentul alternativ ScreenFly.
Instrumentul 320 and Up se bazează pe principiu mai întâi mobil(în primul rând mobil), în care modelele sunt create mai întâi pentru ecranele mobile și apoi extinse la tablete, desktopuri și ecrane mari. Funcționează bine atât ca supliment pentru placa HTML5, cât și ca unul independent.
Acestea sunt șabloane personalizabile pentru construirea de aplicații web mobile bogate și de înaltă performanță. Veți obține compatibilitate între browsere pentru smartphone-uri de clasa A și un suport bun pentru BlackBerry, Symbian și IE Mobile mai vechi. Și, de asemenea, un număr mare de optimizări diferite pentru browserele mobile.
Cadre pentru design responsive
33.1140 Grilă CSS1140 CSS Grid este optimizat pentru a funcționa pe ecrane de pe dispozitive mobile până la monitoare cu lățime de 1280 px. Este o grilă simplă și flexibilă care folosește Interogări media.
Acest cadru CSS este o bază bună pentru dezvoltarea pe ecrane mici (cum ar fi telefoanele) și ecrane mici (cum ar fi tabletele) imediat din cutie, cu un efort minim. În plus, există un generator pentru a crea un cadru CSS fluid pentru dvs.
Flurid este o plasă de cauciuc cu 6, 7, 8, 9, 10, 12 și 16 coloane.
FluidGrids este un generator de grile modular care creează machete de 6, 7, 8, 9, 10, 12 sau 16 coloane.
Cadru CSS pentru crearea machetelor receptive. Conține 4 machete de bază și 3 seturi de tipografie.
Un cadru fluid, cu accent pe tipografie.
Tiny Fluid Grid vă ajută să vă creați propria grilă de cauciuc cu 12, 16 sau 24 de coloane, să setați lățimile maxime și minime și indentarea în procente.
Strategii de design responsive
40. Fluxul de lucru al designerului receptivFlux de lucru responsive pentru dezvoltatori de design web
Luke Wroblewski a subliniat o prezentare a lui Ethan Marcotte despre aplicarea principiilor de design web receptiv la reproiectarea site-ului web al unui ziar de top. Printre altele, Ethan explică modul în care abordează metodologia de design a designului web responsive și cum este prototiparea în contextul designului web responsive.
Luke Wroblewski a luat notițe la Breaking Development Conference în timpul discursului lui Stephen Hay despre realitățile proiectării pentru diverse dispozitive.
Discuții și perspective diferite asupra designului web responsive
Aceste articole, deși nu sunt tutoriale, vă pot oferi informații valoroase despre de ce (și când) ar trebui să utilizați tehnici de design web receptiv.O introducere excelentă în designul receptiv ca mod de gândire, nu ca instrument sau tehnică. Jeremy Keith susține că designul web responsiv nu poate fi adăugat doar ca pas într-un flux de lucru existent. În loc să ne străduim pentru perfecțiunea pixelilor, ar trebui să luptăm spre perfecțiunea proporțională.
Publicarea este o combinație de filozofie și strategie pentru acumularea de bune practici în domeniul designului responsive.
O colecție actualizată în mod regulat de site-uri web care utilizează Media Queries.
În episodul 9 din The Big Web Show, Jeffrey Zeldman și Dan Benjamin l-au invitat pe Ethan Marcotte să discute despre design responsive.
O completare excelentă la acest articol va fi un blog despre design responsive, unde dezvoltatorii își împărtășesc experiențele și scriu recenzii despre instrumentele responsive.
