Receptivă Website Design
Domeniul de aplicare a ceea ce avem o mare varietate de diferite rezoluții de ecran, care, la rândul său, conduce la dificultatea de a obține informații de pe site-uri. Această informație este ușor de citit și ușor de vizualizat pe majoritatea dispozitivelor și a dezvoltat o tehnologie de design adaptiv.
Scopul designului receptiv este dezvoltarea unui desen sau model universal al site-ului, ceea ce ar permite la rândul său, să vizualizați și să interacționeze cu o resursă cu o varietate de dispozitive.
De asemenea, această tehnologie implică dezvoltarea unei versiuni a site-ului pentru toate dispozitivele, nu puține.
web design adaptabil (în engleză Adaptive Web Design.) - pagini de web design pentru afișarea corectă a site-ului pe diferite dispozitive conectate la Internet și ajustează dinamic pentru a se potrivi cu dimensiunile specificate ale ferestrei browserului.
Pe acest ultim punct este corect sau nu este o întrebare dificilă, cel puțin, mulți susțin că este necesar să se înceapă dezvoltarea layout-ul este o versiune pentru dispozitive mobile. Am stick un pic de vedere puțin diferit, mi se pare mai ușor de a dezvolta un aspect de rezoluție maximă, cu o rețea de sunet și funcționalitate completă, și apoi mai târziu adaptat la alte soluții.
Dimensiuni sensibile aspecte de design
Deci, pur și simplu de la viziunea sa a principiilor și dimensiuni, care ar trebui să fie dezvoltate sub aspectul.
Dacă urmați primul principiu al mobilului va fi astfel de permise de dimensiune, în care este necesar pentru a proiecta aspectul de 320px / 480 x / 768px / 1024px / 1280px poate fi mai dependentă de sarcina.
Imaginea arata asa, dar de multe ori sub un fel de rezoluție nu este necesară pentru a crea un aspect, de exemplu, sub 480 x. În cazul în care aspectul nu se sparge în intervalul 768 - 320px.
Desigur, pentru a crea o pânză în Photoshop vom lua în considerare marjele, bare de derulare, iar restul ca un aspect convențional. Crearea unei grile modulare pentru dezvoltarea de facilități, precum și un aspect mai rapide de proiectare. Mulți folosesc cadrele, și, prin urmare, să se bazeze pe grila cadrului care sunt în curs de dezvoltare.
Datorită acestui fapt, putem arăta un typesetter, cum să se comporte pe structura diferitelor rezoluții și dispozitivele cu ecran. De exemplu, am elaborat un model mic, puteți vedea pe imaginea de mai jos.
interogare MEDIA și viewport în designul receptiv
Pentru a spune browser-ului cum să afișeze dimensiunea paginii și scala portul de vizualizare Meta tag-ul. Această meta tag-ul înregistrează în
site-ul. Acesta permite dezvoltatorilor să setați lățimea ecranului pentru dispozitivele care sunt specificate în css.Scris meta tag-ul portul de vizualizare după cum urmează:
Se recomandă să se înregistreze următoarele:
- width = dispozitiv lățimea - lățimea paginii indică faptul că site-ul este setat pentru a se potrivi cu lățimea ecranului dispozitivului.
- Scară inițială = 1,0 - acest atribut spune browser-ului pentru a stabili o corespondență de 1: 1 pixel, care nu este la scară.
Rămas fără o metaetichetă la dreapta folosind tag-ul meta viewport.
Alte atribute și parametri pot fi, de asemenea, setat pentru meta-tag-ul.
Media Interogări
Prin astfel de cereri și de a crea diferite de afișare a site-ului pentru ecrane mobile, tablete și monitor. Sprijinit de toate browserele moderne.
Este scris după cum urmează:
- @media - media - o cerere;
- screen - media - tip (de asemenea, denumite de tip media);
- max-width: 1000px - o condiție care trebuie să fie îndeplinite (în acest caz, se va aplica stiluri, în cazul în care lățimea ferestrei este mai mică decât lățimea 1000px);
- .clasa - precizează selectorii respective (clase, id), în care noua valoare a Desemnate.
În cele mai multe cazuri, dezvoltarea designului receptiv, următoarele medii de stocare - funcții.
- max-lățime: lățime - înseamnă că, în cazul în care mai puțin de o lățime predeterminată de lățimea ferestrei browser-ului, starea și aplicați stiluri adecvate (de exemplu: max-lățime: 768px, înseamnă că, în cazul în care fereastra browser-ului este mai mică decât 768px, este necesar să se utilizeze stilurile specificate în mass-media - interogare).
- min-lățime: lățime - înseamnă că, în cazul în care fereastra browser-ului este mai mare decât o lățime predeterminată, condiția este îndeplinită, și se aplică stiluri specificate în cerere (de exemplu: min-lățime: 480 x).
Dar, de asemenea, alte funcții pot fi utilizate: culoare, dispozitiv lățime, grilă, înălțime, orientare: peisaj, orientare: portret, rezoluție și alte.
Valorile care sunt utilizate în mass-media - funcțiile sunt numite și puncte de întrerupere (de cotitură sau puncte de control). În aceste puncte de control după cum ați ghicit, și de a schimba designul site-ului.
Punctele de control nu poate fi atașat rigid la orice rezoluție a ecranului, deoarece acestea pot fi create cu diferiți parametri pentru acele valori în cazul în care aspectul vizibil se defectează, nu este afișată corect, nu mai este afișată corect.
Mass-media - interogări sunt, de asemenea, utilizate operatori logici, cum ar fi:
- și - logic este utilizat pentru combinarea mai multor condiții (exemplu: imprimare @media și (culoare) <…>).
- Nu - logic nu se aplică pentru o stare de negare (de exemplu: nu toate și @media (culoare) <…>).
- numai - folosi browsere mai vechi care nu acceptă mass-media - interogări (exemplu: @media ecran numai și (max-width: 1300px) <…>).
interogări media sunt scrise la sfârșitul unui fișier de stiluri, după toate stilurile majore de css.
Cum sa faci un design de adaptare a site-ului de la un aspect fix
Deci, să presupunem că aveți un site de lucru cu tema de o dimensiune fixă pe care le-ar dori să plece și să-l aspect adaptiv, dar nu știu de unde să încep. În continuare, voi discuta modul în care acest lucru se poate face, dacă este posibil, la toate pentru a face, și ce să facă, unde să înceapă.
Următoarea editare de start, pentru comoditate, puteți transfera modelul pe Denver (server local) sau un subdomeniu, după cum preferați că utilizatorii nu au văzut toate schimbările care vor avea loc cu aspectul. Primul pas este de a adăuga un port de vizualizare meta tag, despre asta am scris mai sus, sub formă de ambele recomandate.
Acestea sunt px, trebuie să le transferați la%, iar fontul este specificat în em. Acest lucru se aplică în principal lățimile și fonturile.
Lățimea wraper principal al recipientului rămâne neschimbat în cazul în care schimbarea de lățime max-lățime înregistrată. Vom schimba raportul lățime% pentru containerele rămase. Traducem cu formula:
Dimensiune container (px) / mărimea recipientului principal (părinte) până la (px) * 100% = rezultat (%)
De exemplu, static site-ul 720px marimea corpului containerului recipientului principal (părinte), de exemplu, standardul 960 x, apoi obține următorul 720/960 * 100 = 75%.
Dimensiunea fontului (px) / 16px (dimensiune standard) = dimensiunea fontului (em)
De exemplu, dimensiunea fontului 32rh apoi 32/16 = 2em. După aceea vom face adaptativ noastră imagine. Pentru a face acest lucru în css prescrie următoarele proprietăți și valori.
Această metodă se adaptează imaginile proaste, singurul lucru pe care nu reduce greutatea imaginilor, ceea ce înseamnă că mobil va încărca imagini cu mai multă greutate. Pentru acest lucru nu era nevoie să se încarce imagini diferite în funcție de dimensiunea ecranului.
După efectuarea tuturor acestor schimbări dacă ați făcut toate dreapta, atunci nimic nu ar trebui să schimbe site-ul, și dacă încercați să reducă desene fereastra browser-ului și imaginile trebuie să fie comprimat.
Ei bine, aici este temelia noastră este gata, acum este necesar să se identifice punctele de control în care structura va fi reconstruit, să se gândească, cum să se comporte blocuri care va ascunde și scrie totul în mass-media - interogări. Identificați punctul cel mai important, vom folosi browser-ul Google Chrome.
Acesta se va deschide în F12 nostru aspect, apăsați, și va reduce dimensiunea ferestrei browser-ului. În colțul din dreapta sus, vom fi scris de dimensiunea ferestrei, suntem interesați în primul sens, se referă la lățimea. Trebuie să comprimați atât timp cât proiectul nu va mai fi afișată corect. La această dimensiune, atunci când aspectul nu arata corect, vom crea un punct de referință.
În cazul în care aceste unități au unele marje (marja, de umplutură), acestea ar trebui să fie resetate sau luate în considerare atunci când scrieți lățime. De exemplu, umplutură: 2%; apoi lățimea înregistrării după cum urmează lățime: 96%; .
Astfel, ne-am adaptat aspectul nostru pentru a permite mai puțin de 910px. Dacă fereastra browser-ului este mai mică decât 910px, atunci conținutul va fi pe întreaga lățime a barei laterale și a lansat pe o parte din conținut și va deveni, de asemenea, un full-lățime.
Prin același principiu, vom crea și restul punctelor de control, găsiți lățimea la care se rupe de aspect (nu arata corect) înregistrează mass-media - o cerere pentru el, pentru a forma un stil specifica latimea blocurilor, se pot ascunde blocuri mai puțin importante (afișare: nici unul).
După cum puteți vedea, în acest exemplu, punctele de control nu sunt fixate rigid de dimensiunea ecranului, care, la rândul său, asigură o afișare bună a site-ului în diferite dispozitive, indiferent de permisiunile acestora.
Va trebui să muncească din greu, dar rezultatul nu va dura mult timp și va trebui să vă faceți un design de adaptare a site-ului de la un aspect fix.
Asta e tot ce am vrut să-ți spun în acest articol, am vrut să scrie un pic despre designul receptiv, dar sa dovedit destul de volum, sper că materialul va fi util pentru tine.
Pocherk, pentru care este mai convenabil, cineva aspect mai ușor de a face folosind cadre și cineva manual. Întotdeauna și peste tot există argumente pro și contra nu poate fi o singură față pretinde ceea ce este bine și ce este rău. O chestiune de gust cum spun ei.
De exemplu, va fi terminat site-ul curent cu un model fix, pur și simplu se adaptează prin efectuarea unui număr de modificări în css sau complet pereverstaete folosind același cadru? Mi se pare mai ușor să facă unele modificări la un șablon existent.
În opinia mea, acest lucru este un minim foarte bun pe care trebuie să știți dacă doriți să creați un design receptiv. Toate etapele și la subiect. Dar este important să se înțeleagă, de asemenea, ceea ce designul receptiv - nu este doar montarea la dimensiunea ecranului dispozitivului. Aici este necesar să se recunoască faptul că o versiune mobilă separată - mult mai ușor de implementat.
Konstantin Kyrylyuk, depinde ca întotdeauna de sarcina și fezabilitatea unei anumite metode. De multe ori există site-uri la intrarea tabletei încărcate versiunea mobilă, în ciuda faptului că tableta este rezoluția destul de bun.
Eu personal nu-mi place, și dacă a existat ar adaptivă blocuri pur și simplu de reconstrucție.
Paul, Buna ziua! Într-un mod amiabil, este de dorit pentru a converti toate, dar nu neapărat. Aceste valori pe care nu se schimba, vor fi fixe, iar cele care schimba pe% vor varia în funcție de ecranul dispozitivului. Este necesar să se urmărească și pentru ca blocuri de elemente de aspect se poarte în diferite dimensiuni de ecran și pe diferite dispozitive.
Bună ziua, Serghei. Multumesc pentru raspuns. Am redesenat din nou subiect, ca să spunem așa - o exclusivitate. Vreau să spun că trebuie să se schimbe, nu numai lățimea containerului și dimensiunea fontului, dar, de asemenea, dimensiunile tuturor liniilor. Dar, după cum am înțeles, nu există nici un risc de a schimba stilul în fișierul css, dimensiunea în pixeli, și interesul ea? Aproximativ vorbind, totul se face prin selecție?
Pavel, atunci ar trebui să ia în considerare de ce faci acest lucru doar pentru a reconstruit blocuri și de proiectare adaptate sau, în plus, a fost proiectarea corectă a afișajului pe toate dispozitivele.
Dacă o reconstrucție este posibil să se lucreze cu mărimea lor de bloc este corectă pe toate dispozitivele, dar îndoiască retinei display-uri. În densitatea retinei mai mare de pixeli și, astfel, dacă este în imposibilitatea de a traduce în raport cu valoarea statică poate fi o mapare diferită.
Merită să se gândească la fonturi, ele sunt susceptibile de a fi afișate prea mici, dar nu au testat, la care nu se schimbă. Da, și în opinia mea, nu deranjez cu parametri, cum ar fi grosimea frontierei, linii de separare, în cazul în care nu se specifică lățimea. În general, trebuie să caute un model. Nu, verificați, pentru a regla.
Salutări, Serghei. Am finalizat site-ul, toate, desigur, dacă doriți să într-adevăr, dar cu linii violino dovedit a fi necesară. Fit special pentru toate dimensiunile și aproape toate browserele (Mozilla rămâne de rafinat). Deci, după cum se spune - rabdare si munca grea, un pic de efort. Vă mulțumim pentru participare.
Pavel, felicitări! Toate unitățile în cazul în care lățimea specificată este dur, atunci, desigur, trebuie să fie sigur de a se pronunța în mod diferit în nici un fel. Mă bucur că ai totul lucrat. Acest proces nu este întotdeauna ușor, am refăcut șablonul sub un adaptivă timp de aproximativ o săptămână.
Alo Am învățat să adapteze designul site-ului cu un exemplu simplu. Am un cadru de astfel de unități: capac, 2 bara laterală pe părțile laterale, subsol, iar zona de conținut cu 4 blocuri (în locul lor ar putea fi, de exemplu, imagini).
Am înțeles că solicitarea mass-media trebuie să adapteze designul site-ului numai atunci când dimensiunile de ecran, cum ar fi descris în cerere. Și am se pare că este afișat acest design și într-un format larg. În cazul în care codul de cerere de ștergere - totul este din nou așa cum a fost, adică designul este afișat pentru un ecran lat.
Dacă este necesar, pot trimite un fișier de cod.
Bună ziua, Maxim! Da, interogarea media produce adaptarea în funcție de condițiile prescrise pentru aceasta. Pe măsură ce am înțeles, în locul versiunii PC-ul este prezentat adaptat pentru a se potrivi o tabletă? Dacă da, atunci totul este, probabil că ați făcut o greșeală în starea cererii mass-media (max-lățime, min-lățime).
Uite, dacă nu trimite codul sursă la oficiul poștal, a spus ea pe pagina de contact.
Dar, te rog spune-mi ... Așa cum am spus, toată ziua a ucis pe teoria. Dar, în diferite resurse de informații, există concepte diferite: adaptivă aspect, cauciuc, simpatic, etc. Aceasta este, în consecință, și-a făcut o oarecare confuzie în capul meu. Serghei, întrebarea este: Ce-ai fi identificat principalele tipuri de concepte legate de tipurile de layout design, și ceea ce este diferența esențială a acestora? Încă o dată, vă mulțumesc foarte mult!
În ceea ce privește aspectul.
Am identificat mai multe tipuri de aspect aspect de adaptare:
Cauciuc (flexibil) atunci când toate valorile blocurilor și capitonarea găsit în% și fonturi em.
Hybrid (cauciuc + fix).
Bazat pe un astfel de sistem grid utilizat, în principiu, de exemplu, cadrele pentru bootstrap.