Adaptive aspect - modul de a depăși durerea

• CSS
• HTML
• Design receptivă
• dezvoltare Web

Atunci când a existat un principiu de aspect de adaptare pentru mine a fost un coșmar din care eu încă nu pot recupera, este o astfel de durere - pentru că sub fiecare permis, practic, au nevoie de perevorstyvat aspect, scris nou cod, se pare că o mulțime de cod care este mai greu de întreținut. Să ne înțelegem această durere, numită „cod entropie“

Am fost dat recent pentru a impune un aspect de aplicații mobile și în cele din urmă am decis să încerce să depășească această durere, pentru a face frumos și succint - utilizarea real. Mi se părea cea mai simplă soluție, 100% browsere mobile acceptă această unitate. Concluzia este că vom scrie câteva linii de interogări media pentru tag-ul HTML, indicând numai dimensiunile de bază de font în pixeli, proporțional cu modul în care ar trebui să arate ne bate joc la rezoluții diferite, iar vorstku restul fără interogări media pe care le facem ca de obicei, dar în loc de pixeli utilizare rem. Această metodă poate fi scalate cu ușurință și personaliza un aspect în funcție de dimensiunea fontului de bază.
Minimizarea codul și ușurința de aspect adaptiv într-un mod pur și simplu enormă!

A fost singurul dezavantaj al acestei metode: a fost necesar să se efectueze în curs de desfășurare pixel aspect central al PSD real, dar am rezolvat rapid problema - a scrie o funcție specială și sunt stabilite cât mai devreme în pixeli, preprocesorul în sine tradus real.

Dar! Principalul truc este că am typeset o metodă de aplicare mobilă de adaptare, în cazul în care proiectul a fost același.

Când m-am întors la adaptivke pentru site-urile obișnuite - durerea a revenit la mine chiar și cu mai multă forță decât înainte, pentru că, de obicei, avem de la 3 la 6 modele diferite:
1) Desktop pixeli mare 1600-1920
2) un desktop mic / laptop

cu siguranță am exagerat, dar cel puțin trei aspect ar trebui să fie făcut pentru sigur.

Deci, întrebarea №1 și cel mai important: cum să reducă la minimum vorstku codul de adaptare și de a face frumos? Cum de a reduce așa-numitul Codul de entropie? Există vreo abordare / metodologie rece?

M-am uitat diferite site-uri web studiouri de cele mai tari, în scopul de a găsi un răspuns acolo și am văzut că toate culegătorie la întâmplare, care nu este deloc deranjat.
Singurul lucru care a văzut unele din anumite motive, em și procentele utilizați pentru fonturi în loc de pixeli obișnuite. Un fel de a scala textul, deși nu este clar modul în care se reduce codul pentru adaptivki, am complica lucrurile - necesitatea de a efectua calcule, în funcție de unitatea de bază și dimensiunea fontului chiar preprocesoare, probabil, nu va ajuta. Nu știu de ce trebuie să facă baie dimensiunea unităților de fonturi em, probleme cu rem încă nu a mers. Poate că sunt un coder rău. De altfel uporotyh în special a acelor site-uri le folosesc pentru alte proprietăți caseta de dimensiune și marja.
Întrebare №2:
Ceea ce are sens să le folosească?
Și întrebarea №3 listă albă:
Într-adevăr nu există o metodologie unică, într-adevăr în vorstke atât de rău încât toată lumea vrea și cum d. Cit? Sau l-am văzut exemple proaste (deși a căutat printre ThemeForest de sus și de top studiouri site-uri web)?

macik_spb stăpânesc o profesie înainte de a - aspect sau proiectare?

macik_spb clar. Cred că pentru mine pentru a studia design care nu a fost rahat cu aspect de curbe și de a face este mai ușor, mai interesant și mai mult.

Din specificul: cel mai mult imi folosesc ajuta grila 12px-Noy, pe care am nivel praktieski limitele și dimensiunea tuturor elementelor. Dimensiunea ecrane, eu fac rezumate - pentru mine nu există decât conceptul de (portret mobil), două (portret comprimat peisaj mobil) și trei (peisaj comprimat desktop) coloană de conținut. Dar cred că acest lucru este un subiect pentru un articol Habra separat, în cazul în care, la toate oricine este interesat.

Când am început să impună adaptivă, sa confruntat cu aceeași problemă, am fost chinuit de aceleași întrebări ..

Apropo, în mod indirect, la dimensiunea lucrării sunt proprietățile sus, stânga, jos, dreapta - ele pot, în anumite cazuri, să fie utilizate pentru a specifica dimensiunea elementului.
Există, de asemenea, o calc () - un lucru la îndemână pentru poziționarea unui procent la trecerea de pixeli (de exemplu, calculat (50% - 100px)).

BTN-submit culoare: #fff;
border-radius: 5px;
padding: 10px 20px;
text-transform: majuscule;
text-greutate: bold;
margin: 50px;
lățime: 150px;
>

media (min-width: 768px) și (max-width: 920px) .btn-prezinte lățime: 120px;
>
>

media (min-width: 550px) și (max-width: 767px) .btn-prezinte lățime: 100px;
>
>

Atunci când este necesar să se impună anumite lendos, o astfel de abordare funcționează cu un bang. Nu este nevoie să se calculeze cifrele nebuni cu Emami remami și petrece mult timp. La urma urmei, ce să plătească, astfel de lucrări. Numai persoanele care lucrează pe același proiect (de exemplu, un magazin online de mari dimensiuni), își poate permite o zi să se gândească, pentru a alege un em lățime sau real. Deoarece poate fi un design arhitectural de important, decizia greșită, despre care, atunci se poate obține o mare problemă. La fel ca efectul fluture))

În ceea ce privește pierdere de timp. un secret din întreaga lume, voi spune că există un instrument incredibil numit Avocode - nu numai că vă permite să automatizeze calcul și real em, dar, de asemenea, în întreaga Grand accelerează toate procesele verstalnye de rutină!

Un alt punct este că mai complex proiect, cu atât mai mult este nevoie de a utiliza o metodologie de aspect. De ce, chiar și cu impunerea de clase generale de aterizare Eu stau în Common.css, de exemplu, aceleași butoane - ele tind să aibă un stil comun. Sau unele stiluri comune de blocuri individuale. Și, în unele servicii on-line, fără a metodologiei face pur și simplu - sau terci de afară. Mai mult pe deplin precizate și normele definite, cu atât mai puțin probabil ca proiectul se va transforma într-un monstru vâscos, care se poate lucra numai pe cei care l-au scris de la început. Și apoi numai cu dificultate))

Revenind la unitățile relative - ei chiar f trebuie aplicate peste tot doar pentru că doresc uniformitate. Este mai bine să utilizați una care este mai mult în cazul tuturor sensul potrivit.