Adaptive elrendezés -, hogyan lehet legyőzni a fájdalmat

• CSS
• HTML
• Érzékeny tervezés
• Webfejlesztés

Amikor volt egy elve adaptív elrendezése számomra ez egy rémálom, amelyből még mindig nem lehet visszaállítani, ez egy ilyen fájdalmat -, mert az egyes engedély gyakorlatilag szüksége perevorstyvat elrendezés, az írás új kódot, kiderül, egy csomó kódot, ami nehezebb fenntartani. Értsük ezt a fájdalmat, az úgynevezett „kód entrópia”

Kaptam nemrég kiszabására egy mobil alkalmazás elrendezése és végül úgy döntött, hogy megpróbálja legyőzni ezt a fájdalmat, hogy szépen és tömören - használat rem. Nekem úgy tűnt, a legegyszerűbb megoldás, 100% mobil böngésző támogatja ezt a készüléket. A lényeg az, hogy írunk egy pár sort a médialekérdezéseket a html tag, amelyben csak az alap betűméret pixel arányban, hogyan kell kinéznie mi kigúnyolják a különböző határozatok, valamint a többi vorstku nélkül médialekérdezéseket teszünk fel, mint máskor, de pixelek helyett használat rem. Ez a módszer könnyen méretezhető és megszokott elrendezési bázistól függően betűméretet.
Minimalizálása a kódot, és könnyű adaptív elrendezése oly módon egyszerűen óriási!

Volt az egyetlen hátránya ennek a módszernek: szükséges volt, hogy folyamatos Central pixel PSD elrendezés dologi, de gyorsan megoldotta a problémát - írja a speciális funkciót, és lehetősége van már a pixelek, az elpárologtató maga fordítani rem.

De! A fő trükk az, hogy én szedése eljárás adaptív mobil alkalmazás, ahol a tervezés ugyanaz volt.

Mikor visszatért adaptivke rendes oldalak - a fájdalom visszatért hozzám, még erősebben, mint korábban, mert általában van 3-6 különböző kivitelben:
1) Asztali nagy pixel 1600-1920
2) egy kis asztali / laptop

Én biztosan túlzó, de legalább három elrendezést kell végezni, az biztos.

Tehát a kérdés №1, és a legfontosabb: hogyan lehet minimalizálni vorstku adaptív kódot, és szép? Hogyan lehet csökkenteni az úgynevezett entrópia kódot? Van olyan jó megközelítés / módszertan?

Néztem különböző helyszíneken legmenőbb web stúdió, annak érdekében, hogy megtalálja a választ ott, és láttam, hogy minden typeset véletlenszerűen, hogy egyáltalán nem zavarta.
Az egyetlen dolog, látott néhány valamilyen okból használja őket, és százalékokat betűtípusok helyett a szokásos pixel. Olyan, mint a skála a szöveg, bár nem világos, hogy ez csökkenti kódot adaptivki, csak bonyolítaná a dolgokat - folytatásának szükségességét számítások függően a szülői egység és a betűméretet még preprocessors valószínűleg nem fog segíteni. Nem tudom, hogy miért van szükség, hogy fürödni a betűméret em egységek bajok rem még mindig nem megy. Talán én vagyok a rossz kódoló. Mellesleg uporotyh különösen azon oldalak használata em árrés és más doboz méretű tulajdonságait.
Kérdés №2:
Mi értelme használni őket?
És engedélyezőlistához kérdés №3:
Tényleg nincs egyetlen módszer, tényleg vorstke annyira rossz, hogy mindenki akar, és hogyan d. Cit? Vagy láttam rossz példák (bár törekedett az elsők között themeforest és felső weboldalak stúdió)?

macik_spb elsajátította a szakma előtt - elrendezése vagy?

macik_spb világos. Azt gondolom magamban, hogy tanulmányozza tervezés, amely nem volt szar görbék elrendezés és így könnyebb, sokkal érdekesebb és így tovább.

A sajátosságok: leginkább azt használni segít 12px-Noy rács, amelyen I szint praktieski határok és mérete minden elemét. A méret a képernyő, én kivonatok - nekem már csak a koncepció egy (mobil portré), két (tabletta portré mobil táj) és a harmadik (tabletta táj desktop) tartalom oszlopban. De azt hiszem, ez egy olyan téma egy külön cikket Habra, ha egyáltalán valaki érdeklődik.

Amikor elkezdtem kiszabására adaptív, akkor szembesült ezzel a problémával, azt gyötörte ugyanazokat a kérdéseket ..

By the way, közvetve a méret a munkát azok a tulajdonságok, fent, balra, lent, jobbra - ezek bizonyos esetekben lehet használni, hogy adja meg a méretet az elem.
Van is egy Calc () - egy praktikus dolog az elhelyezése százalékában a pixel shift (pl számított (50% - 100px)).

BTN küldje szín: #fff;
border-radius: 5px;
padding: 10px 20px;
text-transform: nagybetűs;
text-weight: bold;
margin: 50px;
szélesség: 150px;
>

Média (min-szélesség: 768px) és (max-szélesség: 920px) .btn-benyújtja szélesség: 120 képpont;
>
>

Média (min-szélesség: 550px) és (max-szélesség: 767px) .btn-benyújtja szélesség: 100px;
>
>

Amikor szükség van előírni bizonyos lendos, egy ilyen megközelítés működik a bumm. Nincs szükség számítani az őrült figurák remami Emami és kiad egy csomó időt. Végtére is, mi fizetni, mint a munka. Csak az emberek, akik dolgoznak ugyanaz a projekt (például egy nagy online áruház), engedheti meg magának egy nap gondolni, válassza szélessége em vagy rem. Mert lehet fontos építészeti tervezés, hogy rossz döntést, hogy melyik, akkor lehet kijutni egy nagy probléma. Csakúgy, mint a pillangó-hatás))

Ami időrabló. egy titkos világ, azt fogja mondani, hogy van egy hihetetlen nevű eszköz Avocode - ez nem csak lehetővé teszi, hogy automatizálják a számítás és rem em, hanem az egész nagy gyorsítja folyamatok verstalnye rutin!

Más kérdés, hogy a bonyolultabb projekt, annál több van szükség, hogy használja néhány módszert elrendezést. Miért, még a bevezetését az általános osztályok Landing állok common.css például ugyanazokat a gombokat - ezek általában egy közös stílust. Vagy valami közös stílusok egyes blokkok. És néhány online szolgáltatás nélkül módszertan egyszerűen nem - vagy zabkása ki. Több teljes név és meghatározott szabályok, annál kevésbé valószínű, hogy a projekt pedig egy viszkózus szörny, amely a munka csak azoknak, aki írta, az elejétől kezdve. És akkor is csak nehezen))

Visszatérve a relatív egységekben - tényleg f kellene alkalmazni mindenütt csak azért akarnak egyenletességét. Sokkal jobb, hogy használja az egyik, hogy több esetén valamennyi értelemben illik.