Realitățile designului web modern sunt destul de grave - ei se numesc ei înșiși un programator web - păstrează o tendință ... Varietatea gadget-urilor folosite de utilizatori pentru a călători pe Internet este impresionantă, fără a menționa caracteristicile lor de design și caracteristicile tehnice.
Diferite persoane, interese diferite, dimensiuni diferite de monitoare ale computerelor portabile. Și sarcina noastră este de a crea o resursă de internet care să asigure o adecvare maximă a afișării rezultatelor și a ușurinței utilizării.
Modelul "cauciuc" pentru o perioadă lungă de timp păstrează cu siguranță încrederea, împreună cu alte metode de adaptare a afișării conținutului pentru permisiunea terminalului client.
Vom vorbi despre niște algoritmi ai acestei metode minunate astăzi.
Formularea problemei
Să ne imaginăm situația - lucrăm la catalogul magazinului de internet și trebuie să deschidem cartea de vizită a mărfurilor pe care este plasată imaginea acestui produs și butonul pentru comandă. Dar, deoarece magazinul nostru (să zicem, alimentele gata preparate) trebuie să fie disponibil întotdeauna și peste tot, butonul trebuie să fie cauciuc.
Aici avem o întrebare logică. Cum să poziționați butonul dacă este din cauciuc? Nu puteți seta limitele de 0px auto, deoarece dimensiunea blocului de butoane nu este fixată. Reprezentarea în șir a butonului nu este, de asemenea, potrivită pentru noi, deoarece este aproape imposibil să personalizați designul în această situație.
Algoritm pentru rezolvarea problemei
După cum sa menționat anterior, anumite avantaje vor veni din randarea liniei bloc a elementului. Și dacă vorbim rusă, vom folosi afișarea proprietății CSS: inline-block.
Pentru o analiză detaliată a acestei întrebări, să folosim un exemplu. Creați o pagină html cu următorul conținut.
Această metodă a arătat o performanță bună, dar după cum v-ați obișnuit deja, familia nu este fără ... stăpânitor. Și, desigur, este vorba despre familia de browsere IE. Afișarea proprietății CSS: blocul inline nu înțelege IE6. iar în IE7 apare o mulțime de probleme și controlul afișării elementelor de bloc, precum și afișarea elementelor de șir devine potențial problematică.
Pentru a "îmblânzi pe cei îndurați", va trebui să setăm cu forța afișarea inline a elementelor și să setăm aspectul.
Astfel, munca noastră va deveni la fel de eficientă atât cu elemente bloc, cât și cu linii:
Codul paginii noastre va fi după cum urmează.
Layout-ul, sau cu alte cuvinte proprietatea fine-hash areLayout! Setați utilizând proprietatea zoom.
- Compatibilitate compatibilă cu browserul. Această soluție a demonstrat eficiența în browsere, începând cu: IE6, Fx3, Op9.5, Sa4, Cr5.
Pentru Fx2, proprietatea de cartare inline-block nu oferă niciun atribut de performanță și dacă decideți să vă optimizați resursa pentru o astfel de relicvă, utilizați afișarea -moz-inline-stack.
postfață
În practica reală, webmasterii de sarcini legate de impunerea de cauciuc sunt foarte des, deoarece scrierea de fișiere CSS separate pentru rezoluții diferite ale monitorului este justificată numai în anumite intervale. De fapt, aspectul flexy este doar o privire asupra lumii deja cunoscute de la un unghi ușor diferit. Dar, de fapt, uneori simplu la prima vedere, sarcinile nu provoacă prea multe probleme până când nu vă obișnuiți cu asta ...
Astăzi, de exemplu, am examinat caracteristicile potențiale ale afișării proprietății CSS: inline-block în sarcinile de aspect "flexibil". Așa cum sa arătat, un element din linia de cauciuc (bloc) cu o imagine de fundal poate fi transformat într-un bloc de linie (inline-block) și aliniat în centru, atribuind un înveliș central.
Mult noroc pentru tine.
4 evaluări (în medie de 5 din 5)
Trimiteți-le prietenilor: