Adaptive elrendezés elrendezés ©
A mutatókat az egyik tervezett oldalak jelentést mintán 400 000 látogató (Runet). Mindössze 60% -a látogatók megkülönböztetni a tény, hogy a szélessége a böngésző ablak között volt 400px - 1300px. Lehet, hogy más értékeket.
„Gumi” lehet használni, de a meghatározott határok (CSS-tulajdonságok min-width és max-width értetődő minden modern böngésző). Az összefüggésben ilyen széles körű ügyfél böngésző ablak szélessége jó formában elrendezés adaptív elrendezése.
Ideális esetben egy adaptív elrendezés a négy megjelenítési lehetőségek megfelelő 4. internetezhet típusú eszközöket:
A számok nem kanonikus, és csak a műszaki trendeket abban a pillanatban. Szabványok adaptív elrendezése nem találtam. Az értékek venni a helyszínen Bootstrap - adaptív layout motor alapuló HTML5 és CSS3 (eredeti - angol nyelven).
Ezek megközelítő adatok lehetővé teszik számunkra, hogy válaszoljon a feltett kérdésre az elején.
Hogyan válasszuk ki a szélessége az elrendezés?
De a válasz nem egy, hanem négy:
- kis képernyőn - 95% a szélesség;
- kis képernyők: - 750px;
- Normál képernyő: - 970px;
- széles képernyő: - 1170px.
Ezekben a dimenziókban meghatározott szélességű függőleges görgetősáv és a kis bemélyedés a széleken (nem szép, ha a tartalom tapad szorosan a képernyő szélén).
Ezen értékek alapján következtetéseket levonni az oszlop szélességét. A kis képernyőkön lesz az egyik oszlopon található a képernyő közepén, és úgy 95% -át a szélessége. Kisebb képernyőkön, akkor dönthet a megvalósíthatóságát egy oszlopot. Azt, hogy egy keskeny sáv (nem több, mint 250 képpont). tudod, hogy a széles sáv (300px vagy több) a normál és széles képernyő. Ha keresnek Adsense. egy oldalsáv jó illeszkedés „finom” vertikális blokk 300 × 600 mm. A széles képernyő, akkor lehet, hogy 2 saydbrara.
Hogyan kell elvégezni egy adaptív vorstku?
Adaptív web design (Eng. Reagáló Web design) olyan nézhető és olvashatóságát a helyszínen bármilyen eszközön. Dióhéjban, a használhatóság javul. Kulcsszó „alkalmazkodó” azt jelenti, hogy a tervezés „igazítani” az eszköz, amely megjelenik. Ie a helyszínen másképp néz ki, de a legmegfelelőbb módja az eszköz, amely megjeleníti.
HTML5 CSS3 JS keretek adaptív elrendezés
Lehetőség van használni a fent említett keret Bootstrap (vagy bármi más). Plus világos: Ön részt csak a tervezés, de a kijelző a különböző eszközökön felelős keretet. hátránya:
- Ez időt vesz igénybe a fejlesztés;
- elrendezés fordul túlterhelve stílusok és a scriptek, amelyek többsége akkor sem használja;
- Az internet kétértelmű nyilatkozatok rovására cross-browser ilyen döntést.
CSS @media lekérdezések
Úgy vélem, hogy a legjobb megoldás - a legegyszerűbb. Mivel vettem a lehetőséget, hogy a CSS-médialekérdezés. amely támogatást nyújt az összes modern böngészőben. És, hogy támogassa az IE böngésző a 9. verzió, akkor használja ezt a trükköt (add
):Médialekérdezéseket akcióban
Például azt a jogot, hogy csak #layout. tartály
Amennyiben a kódot a pontokat, akkor írj az Ön CSS-szabályokat. Különösen a betűméretet kontroll, margók, megjelenítése és elrejtése az oldalsávon oszlopok szélessége, és így tovább.
Az elv a következő. Először is, a böngésző figyelembe veszi a stílusok, amelyek szerepelnek a felső részén a CSS-fájl, hívott «CSS-szabály alapértelmezés szerint.” Aztán ott vannak a tervezési @media képernyő és (.). amely arra kényszeríti a böngészőt, hogy fontolja meg az új stílusok, ha a feltétel beviteli képernyő szélessége a megadott tartományba. Ha bármilyen böngésző támogatás nélkül médialekérdezéseket (ritka) - akkor egyszerűen figyelmen kívül hagyja ezeket az utasításokat, és megjeleníti «CSS-szabályok-default” (hogy megoldotta a hiánya cross-browser támogatás). Mivel alapértelmezés szerint van egy szabály, amely megfelel a szélessége a normál képernyő: 970px szélesség elrendezés.
A fenti elég már kezd kiszabására adaptív elrendezése. A többi használhatja tetszése-e vagy nem alkalmazzák egyáltalán.
Ravasz és finomságát adaptív elrendezése
Mobil böngészők általában megpróbálja, hogy illeszkedjen a szélessége a hely alatt a képernyő szélességét. Még ha az elrendezést szélessége 1500px, Android és a Chrome böngésző méretének beállításához a helyszínen alatt a képernyő mérete. Persze, ha használja médialekérdezések akkor kap váratlan eredmények. Hogy megakadályozzák a böngésző skála a helyén, ha nem sikerül a méret a helyén, akkor regisztrálnia kell
utasítások:És mi van a kép, amit feltölt az oldalra összege 600px szélességben? Hogyan kell kezelni a tartalmukat a csökkenő méretű oszlop 500px (például tabletta)?
Ahhoz, hogy írni általános szabályok:
Ezután képek foglalnak legfeljebb 95% -át a tartály szélessége, amelyben laknak.
Nullázás és normalizálódása beállított stílusok
Amikor vorstke bármilyen tervezési kell vennie, hogy minden böngésző előre definiált stílust számos elemével. Például, még ha nem ad meg CSS-szabályokat, fejlécek merész és nagy, a bekezdések között lesz tolva, a szerző jelenik meg dőlt stb Csak előre stílusok különböző böngészők eltérő. Ha írunk a stílus kiegészíti előtelepített a böngészőben, akkor valószínű, hogy egy másik böngészőt egy másik rendszer, a helyszínen egy kicsit más. Mielőtt írni a CSS-szabályok előre stílusok esetén be kell állítani, és normalizálják (hogy a közös elme). Van erre 2 CSS-fájl:
Ezek a fájlok tartalmazzák az elején a fő style.css így:
Átalakítás menü a listán kis képernyőkön
Majd a CSS egyszerűen megjeleníti az alábbiak egyikét, attól függően, hogy a szélessége a képernyőn:
Ebben a példában akkor hiszem magad, hogy semmilyen más alternatíva.
Átalakítás két hasábos elrendezés egy oszlopban a kis képernyőkön
Létrehozása többoszlopos elrendezés (fix szélességű oldalsáv és a „gumi” tartalom, két oldalsáv, stb) - a téma egy másik cikk. Az egyszerűség kedvéért példaként I-hez, két hasábos elrendezés.
Már jeleztem adaptív CSS-szabályok #layout - réteg, amely csomagolt tartalom. Nem bonyolítja a kódot ismétlés. Csak tartsd észben, hogy a kód az alábbiakban ismertetett csomagolva egy réteg elrendezését, az elrendezés a CCS leírt szabályokat.
Hívjuk az alapvető #content oszlopot. és #sidebar tálaló. HTML:
A legfontosabb dolog -, hogy helyezze a oldalsávon a tartalom a kis képernyőkön alatt jelenítheti meg és nem a fenti. És szeretné helyezni az oldalsáv a nagy képernyőn balra vagy jobbra - a felelős ezért a CSS:
Elrendezés Ebben a példában, a bal oldali oszlopban 70% -át képviseli a szélessége a sávot, és jobb 27% a szélesség. A köztük lévő távolság 3% elég vizuálisan „összeragadt”. By the way, ha úgy gondolja, hogy meghatározott százalékát a szélessége az ablak - ez nem igaz. Valójában, ez a százalékos aránya a szélessége a szülő réteg. Mint már említettük, a gyakorlatban a teljes tartalom
Ez csomagolva egy réteg elrendezést. így Ha kér egy elrendezés szélessége 1000px, a tartalom lesz 700 képpont méretű, és az oldalsáv - 270px.Meg kell használni, amit szeretne. Akkor például, adja meg a betűméretet pixel, sorköz: 1.5em, hogy hozzon létre egy fél intervallum, hogy ne írja felül ezt az értéket, ha változtatni a betűméretet.
Jellemzően, célszerű meghatározza az alap betűméretet (például, a szervezetben) a px vagy pt, és a többiek - relatív értelemben (például, 70% egyenértékű 0.7em). Ezután szélességétől függően a képernyő elég lesz ahhoz, hogy módosítsa a bázis betűméretet a másik automatikusan igazodik.
Sense kódot írni ebben a cikkben, ha nem tudok másolni? Vagy úgy gondolja, hogy valakinek meg kell-e újból?
Kis fiát az apa jött és megkérdezte pipsqueak: «RSS jó? Ez nem egy rossz dolog? „Nincs titok, hallgat, gyerekek. RSS néha helyettesíti könyvek
Kategóriák, címkék
blogarchívumban és naptár alján az oldalt. Görgetni hosszú ideig, nyomjuk meg a gombot.
Mese a letűnt évek
Ez a widget, úgy vélem, hasznos csak magamnak -, hogy a hozzászólások a korábbi évek ösztönözte, hogy írjon új hozzászólások
Nem találja a nevét néhány tételt az ország? Tud ajánlani nekem egy képzett név, amely tükrözi az azonos anyag ugyanolyan rövid űrlapot.