Înainte de asta vorbeam min conținut, unul dintre cele mai importante cuvinte cheie din CSS, pe care designerii le pot folosi pentru a crea modele de web, pentru a da prioritate conținutului. In acest articol voi discuta cuvântul cheie opus: max-conținut.
Utilizați max-conținut, pentru a ajusta dimensiunea imaginilor
Să presupunem că avem câteva miniaturi situate în elementul antet:
Se va arata ceva de genul:
Totul ar fi bine, dar ce despre spațiul gol la capătul containerului?
De obicei, în cazul imaginilor adaptive trebuie să crească amploarea conținutului, astfel încât acesta este umplut complet container. Dar dacă am putea folosi abordarea opusă: pentru a reduce dimensiunea containerului, atâta timp cât acesta nu este conform cu dimensiunea originală? Putem obține rezultatul dorit prin creșterea dimensiunii fiecărei imagini în timp ce dimensiunea totală suma imaginilor nu se va potrivi cu un element de antet dimensiune fixă, dar aceasta va fi o metodă lentă, obositoare și trudnoizmenyaemy (în afară de aceasta nu este adaptiv).
În schimb, vom folosi max-conținut:
Și, după adăugarea de prefixe versiune furnizor rezultat este după cum urmează:
Acest rezultat este mult mai bine. Alte alternative standard: proprietăți de aplicare la afișajul containerului: inline-bloc de afișare: proprietăți de masă de celule sau float. Dar utilizarea acestor metode are consecințe grave, care afectează localizarea restul conținutului de pe pagina; Lățime: max conținut afectează numai lățimea elementului în sine.
Este important de notat faptul că lățimea de aplicare: max conținut poate containere „burst“, folosind mijloace convenționale pentru crearea de imagini pentru conținutul adaptiv, pentru a reduce în mod artificial în imagini la scară a reveni la dimensiunile lor inițiale. Din exemplul anterior, am exclude imaginile din cererile mass-media atunci când fereastra browser-ul este îngustată, cu toate că, în viitor, această decizie va fi utilizat atributul srcset.
Poate cel mai simplu mod de a aminti, ceea ce face max conținut, - este să ne amintim că acesta răspunde la întrebarea Și acest lucru, de altfel, este bine ilustrat în următorul exemplu „cât de mici pot face un container fără a fi nevoie de a transfera linii?“.
Utilizarea max-management al conținutului titlul de text
Se poate discerne cu ușurință min-max conținut și conținut, deoarece primul va fi dispus să împartă testul în mai multe rânduri, până când hit-uri ceva „indivizibil“, cum ar fi o imagine, în timp ce-max conținut niciodată face:
Rezultatul acestui fapt este văzut în ilustrație, utilizând elementul figură. După cum puteți vedea, folosind max-conținut, textul va avea întotdeauna prioritate, fiind situat într-o singură linie. Desigur, trebuie să fii atent, pentru că acesta fixează elementul de lățime cifra, care va fi legată de lățimea textului subtitrării nedivizată, iar elementul devine maladaptativ. Pe de altă parte, max-conținut - aceasta este o modalitate ușoară de a comunica, „face întotdeauna o imagine cu semnătura de aceeași mărime ca și semnătura în sine“:
Noi folosim o soluție de adaptare pentru max conținutului
Cu putina ingeniozitate, putem folosi max-conținut pentru web design receptiv:
Acesta poate fi tradus astfel: „Să elementele cifra ocupă 33% din lățimea containerului, dar niciodată nu va fi mai mare decât lungimea de semnătură.“
Asistență și Caracteristici
Cuvinte cheie max conținut face parte din CSS și a devenit disponibil aproape de la lansarea Firefox 4, dar nu este încă utilizat pe scară largă în dezvoltarea web. Unul dintre motive ar putea fi faptul că aceasta rămâne una dintre puținele valori CSS care necesită versiune furnizor de prefixe:
Desigur, un alt factor este suportul browser-ul: browser-ul IE încă mai are nevoie pentru a prinde cu alte browsere în problema de măsurare a dimensiunilor interne și externe. Deși Microsoft Compania susține că sprijinul cuvânt cheie este luată în considerare pentru a fi incluse în versiunea de IE 11. Între timp, Internet Explorer și Android va trebui să utilizați opțiunile de înlocuire discutate mai sus, în scopul de a obține rezultatul dorit.
Revizie: Echipa webformyself.
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram