Hogyan készítsünk egy HTML oldalt

Hogyan készítsünk egy HTML oldal adaptív?

Lépésenkénti útmutató az adaptív kialakítás létrehozásához

Helló! A világ nem áll, és vele együtt nem szabad elmaradni és mi. A hordozható eszközökből származó látogatók százalékos arányát geometriai progresszióban termesztik, mivel ez a tendencia, és ez a cikk megírásra kerül.

Bevezetés

Egészen a napig sok látogató panaszkodott mind a megjegyzésekben, és személyesen azt mondom, hogy ez a blog egyszerűen nem illeszkedik a keskeny képernyőkbe (vízszintes görgetés jelenik meg, és a háttér nem működik a jobb oldalon). Tudtam ezt a hiányosságot, de szeretem időt takaríthatok meg az ilyen dolgokon: én elvégezem az IE9 és magasabb oldalaimat, nem hozok létre mobil verziókat és így tovább. (Személyes idő és kód megtakarítása). Mindazonáltal én is gyakran használok okostelefont, mint egy asztali könyvet a szakmámban: a tömegközlekedésben olvasom, a kanapén (nincs laptopom) és így tovább. Általánosságban fokozatosan arra a következtetésre jutottam, hogy olyan fontos részletek, mint a különböző eszközökön való olvasás könnyű olvasása, már nem hagyhatja figyelmen kívül Az egyik oldalon sem.

Számolja ki az összes olyan eszközt, ahonnan a modern világban eljuthat a webhelyére, szinte lehetetlen, mert már van internet-hozzáféréssel rendelkező számítógépek.

Ezért nem elég, hogy hozzon létre egy külön változata a honlapon (mobil) értelemben (ez nem jelenti azt, hogy propagálják teljesen tőlük, minden attól függ, a konkrét esetben), különösen sok tulajdonosai táblagépekre és okostelefonokra elégedetlen a Tény, hogy a high-tech-megoldással rendelkező high-tech készülékeken a high-tech készülékek mobil verziója a teljes helyett megjelenik.

Tehát, hogy nem kellene a típusokat osztályoznunk a típusokhoz, és hozzon létre egy külön webhelyet okostelefonokhoz (MHab, MobilHab vagy HabMobil/), Privát honlapon tabletták, külön site multicookers internet-hozzáféréssel és TD. & #; Adaptív kialakítás készült (szinonimák: adaptív elrendezés, elrendezés).

Jelentése az adaptív elrendezése, hogy az oldal dinamikusan (valós időben) igazodik a mérete a készülék, és ha a méret a kijelző hirtelen kitágul / szűkül (akkor is, ha a böngésző helyett vagy tájolásának megváltoztatása a tabletta ), akkor a webhely azonnal reagál, újraindítás és késedelem nélkül.

Ennek eredményeként a webhely (HAB) egyetlen verzióját kapjuk, amely tökéletesen megjelenik bármely eszközön és képernyőkön, tekintettel a funkciókra.

A blog adaptív elrendezésének létrehozása (rögzített) Elhagytam az egész szombaton: Reggel éjfélig pihenő szünetekkel.

Ez a foglalkozás kissé unalmasnak tűnt nekem, de a vágy, hogy élvezze a végeredményt, nem engedte elhalványulni a lelkesedésbe.

Most minden látogató ebben a blogban a lehetőséget, hogy egy kényelmes olvasás cikkek bármilyen eszközről: Kezdve a rádiót az autóban, és befejezve a TV a falon.

Az ötletek kedvéért búcsút kellett mondanom a Nolix hirdetési vonalra, mivel nem volt megfelelő a képernyők kis határozatainak, és kifejezetten eltávolítaná számukra, hogy a hirdetők megtévesztése lenne, mert a shows, a legvalószínűbb, még mindig csal.

Amikor elkezdtem csodálkozni egy adaptív elrendezéssel, nem találtam jó utasításokat a hálózati akcióhoz. Valamilyen oknál fogva az összes cikk ezen a témában nem inspirálta a bizalmat, így az egyetlen kiutat számomra, hogy mindent elolvassunk az eredeti forrásból – a könyvből Itan Marcotta “Responsive Web Design”, Az eredeti könyv a: Hab: Hab

By the way, miután elolvasta a könyv orosz nyelvű változatát, magamra arra a következtetésre jutottam, hogy az “adaptív” és “reagáló” nem két különböző fogalom, hanem csak a fordítás nehézsége, ennek ellenére a hálózaton sok Viták ezen a témában.

Ezután térjünk vissza a létrehozására vonatkozó utasításokat reagáló elrendezés a helyén, a példa erre a blogra.

Hasonlítsa össze a nézetet a tablettákon, mivel (engedély *):

Az okostelefonon (engedély *):

Ismét hangsúlyozva, hogy a különbség nemcsak hordozható eszközökön látható, hanem bármely más, viszonylag keskeny megjelenítési felbontású eszközön is látható. Például az én terem van egy másik telepített számítógép egy csőszerű monitor és engedélyt pixel, így ha korábban blogomban nem került volna a szélesség és nézett rettenetesen, most úgy tűnik, hogy a blog létre kifejezetten erre a régi monitort.

Az adaptív kialakítás három fő elvből áll:

• Gumi elrendezés
• Gumi képek
• Média-nyilvántartás

1. Rugalmas elrendezés

Rugalmas elrendezés létrehozásához csak relatív mérési egységeket kell használnunk: Em A betűmérethez és % Az elemek méretéhez. Ritka használatban px Nincs semmi baj is, de jobb, ha minimalizálja őket.

Korábban, a szélessége a blog-ban rögzítették, és egyenlő a PX helyett kell vennünk valamilyen rugalmas értéket, például 90% böngésző ablakot. Ugyanakkor úgy döntöttem, hogy az oldal még mindig nem lehet túlságosan széles, és ezért azonnal korlátozza szélességét a kedvenc px-re, végül:

Miért pontosan 90%? Csak annyira akartam, úgy döntöttem, hogy a jobb oldali 5% -os francia bekezdés a leginkább a leginkább. 99% -ot vagy 80% -ot tettünk lehetővé, mindez az ötletétől függ.

Tovább megyünk, 2 oszlopom van: a főoszlop (az, akit most szeme vagy) és a jobb oldali oszlopban van. Szélességük px és px volt, de most már százalékban kell újraszámolni, és itt van egy képlet minden alkalomra:

Cél / kontextus = Eredmény

Vagy, ha egyszerűen és oroszul mondunk, akkor:

A PX kívánt elem szélessége (betűmérete) feloszt A PX szülőelem szélességén (betűmérete) = a kívánt eredmény% (vagy em).

Ezen befejezném a gumi elrendezéséről szóló történetét, mivel már elmondtam az összes lényegét, de folytatom a jobb asszimilációt.

Tehát a fő oszlop Egy fix verzióban egyenlő px-vel, kontextusával (szülő) Egy fix verzióban Ennek eredményeként a px szélessége van:

/ =

Mivel érdekre van szükségünk, nem em, akkor az eredményt meg kell szorozni, ennek eredményeképpen:

Valószínűleg remélte, hogy ezt a számot dobálnám? De nem, a könyvben kategorikusan nem ajánlott. Ezért nézze meg a helyzetet, mennyire fontos a pontosság az ügyben. Két oszlop esetében ez a pontosság teljesen nem fontos, ezért úgy döntöttem, hogy mindent 4 karakterből állok. Ennek eredményeként itt van a CSS a főoszlophoz:

Kérjük, vegye figyelembe, hogy ajánlott megjegyzéseket hagyni a számításokkal, különben elfelejteni és megzavarni, mit kell osztani a jövőben. Személy szerint szeretem elhagyni a megjegyzéseket csak az első szám & #; osztó.

Ugyanezt tesszük a megfelelő oszlopban is:

Remélem, hogy a lényeg világos, forduljon a betűtípus méretéhez, amelyet pontosan is kiszámítunk.

Alapértelmezés szerint az asztali böngészők a 16px betűméretét mutatják, de nem vagyunk kívánatos képpontok, így ha ugyanazt az értéket szeretnénk elhagyni:

16 (a kívánt érték) / 16 (alapértelmezett érték) = 1 em

De a betűtípust 16 pixelben túl kicsi, inkább 18, így:

18/16 = em

A logó “webhelyének betűtípusa!”A rögzített elrendezés 40px, fordítására em:

Figyelte a figyelmet? Most egyáltalán nem osztódnak 16px, de 18px, hiszen a szülő (a Body tag) én logó méretét 18px, ennek eredményeként, CSS:

És mindegyik elemgel, tényleg nemes, nem igaz? De az érdeklődéssel rendelkező munkáink a mobileszközökből származó stabil forgalom formájában fizetnek.

2. Rugalmas képek

RÖVID: Ha nem adja meg az IMG-címke attribútumainak méretét, add hozzá a CSS-t:

És ha megadja a képek méretét az attribútumokban (megadom és tanácsot adok Önnek):

3. Média-nyilvántartás

Nagyon érdekes, egyszerű és együtt ezzel a rendkívül hasznos dologgal & #; @Média. De nézzük azonnal cross-browser … Jó hír, hogy a legtöbb modern böngésző támogatja a média regrunities: köztük Opera +, Firefox +, WebKit bézerek, mint a Safari 3+ és a Chrome, valamint IE 9+.

Igen, és a mobil böngészők, a dolgok nem rosszak. Média regisztrációk támogatják a Webkit Basers, mint például a Mobil Safari, a HP és az Android webOS, valamint az Opera Mobile és az Opera Mini. Ami a Windows Phone, IE9 + telepítve rájuk, amely teljes mértékben támogatja a média regisztrálni, ami nem, de örvendezz.

A böngészők régi verziói, beleértve az IE8-at és az alábbiakat is, szintén nem jelent problémát. Vannak speciális JavaScript könyvtárak, amelyek biztosítják% cross-browser kezdve IE5, például HAB vagy HAB

Aki még mindig nem ismeri a média-nyilvántartást, információt kereshet a referencia könyvekben, vagy kitalálhatja a cikket, semmi sem nehéz bennük.

Itt van a média fő használata az adaptív esetünkben:

Ez úgy olvasható, mint ez: Ha a képernyő mérete egyenlő vagy kevesebb PX, akkor alkalmazza a beágyazott szabályokat. Ezt a kódot a szokásos bármely helyre helyezi .CSS fájl, mint bármely más CSS kód.

Mi történik a fenti példában? Ha a látogatói képernyő egyenlő vagy kevesebb PX, akkor a képeket rugalmas és eltávolítjuk a hátteret egy adott tételből.

Azonnal vegye figyelembe, hogy a képek tehető gumi azonnal (bármilyen méretben), nem volt szükséges, hogy ezt a kódot egy média regisztrálni, de azt hittem, logikus.

Köszönhetően a média regisztrációja, hogy a terv hasonlít engem Ha (állapot) a PHP-től vagy más programozási nyelvektől, akkor a képernyőméretek függvényében újraépítjük a webhelystílusokat.

Ez az, hogy a média regenciák épülnek a blogra, hogy biztosítsák a teljes alkalmazkodóképességet:

Azaz, a médiában regists, minden külön-külön adja meg azokat a változásokat, amelyek szükségesek egy adott helyszínen egy bizonyos böngésző méretet. Az egyértelműség érdekében megváltoztathatja az észlelési böngésző (Stile) méretét, és kövesse a fent leírt stílusok fokozatos használatát. Ez az, hogy a média regiszter működik.

Következtetés

Megjegyzem, hogy az adaptív kialakítás egyik modern megközelítése az, hogy először alakítsa ki az elrendezést a legkisebb kijelzők (az első mobil “koncepciója), és csak akkor, mint a kijelző méretei növelik a weboldal elemeit (progresszív javítás) a JavaScript használatával. A jelentés nem kényszeríti a felhasználókat a telefonokból, hogy letöltsék a felesleges adatokat, amelyeket egyébként nem fognak látni, ezáltal lassítva az oldal betöltését.

Ha ez a cikk nem elegendő ehhez a cikkhez, vagy valami nem világos, azt javaslom olvasni az ITAN Marcotta könyvét, amelyet a cikk elején említettek, az eredeti, csak az oldalakról van szó.

Köszönjük mindenkinek a figyelmét és sikerét az adaptív webhelyek létrehozásában!

A cikk hasznos volt az Ön számára? Iratkozzon fel, hogy ne hagyja ki az újakat!

Segíthet a projekt fejlesztésével, csak 1 kattintással:

Kérjük, hozzon létre, hogy a cikkem hogyan?

Köszönöm a könyvet, már letöltöttem, olvastam.
Az adaptív design és #; Hiba van az oldalon. Átolvastam a% -ot.
Megjelent egy jegyzet, hogy a webhely adaptív verziója aktiválva van.
A fő navigációs az oldalon használom a húr után a start gombot (Nézem a honlap készítés, aztán úgy dönt, hogy a CSS menni a szakaszt, és válassza ki a Publishing olvasásra) & #; Tehát a méretarányban% (megértem, hogy a webhely adaptív változatában) a menü nem viselkedik megfelelően & #; Amikor lebegíti a kurzort, megjelenik egy második szint, de nem késleltetett, lehetetlen időre kattintani a kívánt menüpontot.

A webhely navigációjának javítása a lebegő egységbe & #; előfizetés & #; Hasznos lenne lehetővé téve a menü hosszabb navigációval (a lehető legkevésbé a szükséges cikkek kiválasztásának lehetősége, nem beszélve egy adott kiadványról). By the way, ez a lebegő egység eltűnik a% -os skálán, míg a cikk szövegét nem emelik fel az egész térre. Jó lenne, ha a szöveg az egész szélesség mentén mozog, vagy annak érdekében, hogy üres legyen, van egy blokk (navigáció vagy előfizetés), hogy az üres hely ne zavarjon.

Ez az oldalról való kilátás, talán ezek a pillanatok csak véletlenül észrevették, vagy úgy fogalmaztak meg.

By the way, a felfelé mutató nyíl is eltűnik, amikor a skála, bár mindig (azt hiszem, így) mindig bármilyen skálán.

jó nap. Scale nem befolyásolja a küldő megjegyzéseket, mint ez a szerver része a helyszínen. Úgy tűnik, néhány nem keresztbe hiba történt.
A nyíl kifejezetten, a legtöbb modern böngészőben a hordozható eszközökhöz épül, csak a hely elfoglalja.

A menü korrigált köszönhetően.

Helló.
Elsajatitottam ma egy könyvet adaptív tervezése. Kiderült, a könyv több vizet lényege & #; Talán olvasni úgy döntött, a lényeg, és ez illeszkedik a kiadvány. Ez azt jelenti, hogy ahhoz, hogy elolvassa ezt a cikket, és nem zavarja, ha elolvassa a könyvet. Bár az alapelvek világos, hogy az adaptív tervezése a kívánt dolog, és mi a teendő szükséges & #; Mivel ez egy lépés a jövőben. Ez az, amit megteszek, amikor megértem, hogy mindent elhelyeznek a VirtueMart Pattern & # #; Végül is meg kell kezdeni a mobil verzióval, amelyre nincs alapértelmezett. Nehéz mindez, semmi sem példa nélkül, és foglalkoznia kell.

Ami a könyvet maga & #; Helyesen íródott, ugyanakkor megpróbálta megismételni a teljes kódot, de sajnos, az adaptív design működőképes változata nem működött ki & #; A szerző úgy döntött, hogy eltávolítja a design kialakításának hatalmas részét, és pontosan az adaptív verzió figyelembevételével. Ugyanakkor az összes többi példát már nem lehetett megismételni a forrás hiánya miatt. De a tanulmány pontosan megismétli és az eredmény megszerzését. Vagy talán egyszerűen nem könnyen könnyen olvasni és #; Tényleg szerettem volna elsajátítani ma, és nem halasztom el egy hosszú dobozban.

A kifejezetten a design és #; Skála +%, írom ezt a megjegyzést, és helyezzen be e-mailt az előfizetésre. Belépek & #; falvak & #; jobbra a balra és #; és. A gomb megnyomásával elrejti a nézetet. Eltávolította a DAW-t az előfizetésről (lehetett csökkenteni a skála), hogy megjegyzést küldjön. Valójában valószínűleg szükséged van egy kicsit aláásni és ezzel a gombbal.

A modern böngészők és #; Van egy króm, egy eszköz számítógép, amelynek kiterjesztése * A gomb nagyon lenne az út. A megtekintési terület megkülönböztetéséhez a megadott könyv szerzője azt ajánlja, hogy megkülönböztesse a szélességet és az eszközszélességet, hogy meg kell határoznia, hogy meg kell jelennie, hogy meg kell-e megjeleníteni a választást vagy sem. Ebben az esetben, ha az eszköz képernyő kiterjesztése kisebb (például), akkor ne mutasson egy gombot, ha több & #; előadás. A készülék szélességének és nem csak szélességének köszönhető.

Bár nem igazán rám értem, még nem vagyok hatáskörrel ezeken a kérdésekben, és nem értem, miért szükséges vagy nem szükséges. Én azt mondják, hogy nem kényelmes.

Azt is mondja, hogy a * -ra lévő betűtípus meglehetősen kicsi, ami azt jelenti, hogy egyszerűen csatlakozhat @media ebbe a bővítést a betűtípusok legalább 50% -os betűtípusának növelésével; Kényelmesebb a webhely használatához.

Még nem tettem hasonló webhelyet egy adaptív tervezéssel, és még mindig nem tudom, hogyan kell csinálni jobb & #; De a webhelyeden megtaláltam, amit keresek, és át akarok menni az összes kiadványon a lépcsőn. Elnézést a tudatlanságomért, amit rámutatok arra a pillanatokra, amelyekre a látogatóként lényegében nem határozhat meg & #; Mivel a szerző eldönti, hogy hogyan kell, és a felhasználók használhatják az erőforrást olyan formában, amelynek formájában létezik, vagy egyáltalán nem használható, ha nem ért egyet valamivel.

Kellemes nap Sergey!

jó nap. Köszönöm a megjegyzést.

A webhely alkalmazkodóképességi vizsgálati skála nem teljesen helyes, meg kell változtatnia a böngészőablak méretét vagy a megfigyelési felbontást. A skála mindig%. A skálázás és a rezisenizálás során való viselkedés kissé eltérő.

Én, egyébként *, kiváló, nem szabványos arány ��

A helyszínen található betűtípus nagyobb, mint más blogok, 18px, általában minden 16 vagy az a mód, ha bekapcsolja a Windows & #; nagy fontot, akkor a blogomban is növekszik.

Tegyen egy adaptív kialakítást a virtueMart számára, ehhez a bloghoz vagy bármely más webhelyhez & #; Semmi különbség. Ez az, hogy a különbségek e cikket virtueMart nem. Ez csak egy összecsapás, nem függ a CMS-től.

Mint idő lesz, azt tervezem, hogy folytatom a saját sablon létrehozásának témáját, elmondom valamit a virtuemart példáján, talán tisztább leszel.

Hab

Hogyan lehet az oldal adaptív: tippek

Az elektronikus szerkentyű által elfogyasztott internetes forgalom minden nap szó szerint növekszik. A modern felhasználóknak forrásokra van szükségük a legkényelmesebb felületekkel. Idővel az adaptív elrendezés lehetővé teszi, hogy megfeleljen ennek a szükségletnek, mert automatikus üzemmódban engedélyezett a weboldalak megváltoztatásához a mobileszközök jellemzői alatt.

Ami

Adaptív elrendezés, amelyet más néven mobilbarátnak neveznek, azt jelenti, hogy bizonyos műveleteket végeznek, amelyek célja a különböző képernyőfelbontáshoz alkalmazkodó weboldalak fejlesztése.

Néhány évvel ezelőtt, a szakemberek ezen a területen kellett létrehozni több változata weboldalakat, hogy az erőforrás lehet normálisan jelenik meg „ktrnhjyys [modulokat különböző ablak jellemzői. Így dolgozott a mellények az évig. Aztán az a gondolat, hogyan lehet, hogy az oldal adaptív megváltozott drámai módon. Ezután egy speciális programozási nyelvet használtunk a funkció végrehajtásához – JavaScript.

Hogyan lehet az oldal adaptív az összes mobil eszközhöz? Most az elrendezést a CCS3 táblák, valamint a speciális HTML5 nyelv alkalmazásával végzik.

Miért van az adaptív webhely

• A különböző megjelenítési felbontással rendelkező modulok segítségével menjen a hálózathoz. Ma az emberek sok különböző eszközt és háztartási igényeket használnak, valamint az internet alkalmazását. Természetesen ugyanazt a webhelyet fel kell tüntetni, és jól néz ki a különböző méretekkel és képernyőfelbontással rendelkező eszközökön. A felhasználóknak nem szabad kényelmetlenséget érezniük, ha egy vagy másik modullal dolgozik.
• Az internetes forgalom javítása, a mobil alkalmazások és eszközök népszerűsége. Az elektronikus modulok aktuális igénye, amellyel meg lehet adni a hálózatba, meglehetősen ésszerű, és alig van valaki, aki ezt a tényt vitatja. Az ilyen népszerűség egyszerűen lehetetlen, hogy ne vegye figyelembe, mert ezek a felhasználók valószínűleg az oroszlán részesedése a közönségedről. Tehát, ha azt szeretné, hogy hagyja el a látogatók száma a forrás azonos vagy növelje meg, akkor nagy figyelmet kell szentelnie a saját igényeit és érdekeit. Más szóval, tényleg mindent meg kell tennie, hogy megtalálja a webhelyet, hogy a lehető legkényelmesebb legyen, különben ügyfelei csak a versenytársakhoz mennek.

• Vészhelyzet. Ha a specializáció a hírek és egyéb vészhelyzeti információ biztosítása, akkor szükség lesz arra, hogy a felhasználó sürgősen, és semmi, de a telefon ebben a pillanatban ebben a pillanatban nem lehet ebben a pillanatban. Tehát az Ön feladata, hogy biztosítsa neki a lehetőséget, hogy megismerje a szükséges információkat a lehető leggyorsabban.

Az adaptív elrendezés és a mobil alkalmazás összehasonlítása

Mindenféle programok és helyszínek a mobil verziók vonatkozó modulokat – is egy jó lépés, azonban számos hiányosságot.

• A mobil alkalmazásnak szükségszerűen megfelel az operációs rendszer típusának. És erre nem csak időt kell töltened, hanem pénzt is.
• A program letöltést igényel. Használja, telepíteni kell. Természetesen a felhasználó meg tudja csinálni, de csak akkor, ha gyakran szüksége van rá. Ha nem lesz ilyen szükséglete, akkor valószínűleg megtagadja ezt. Ennek eredményeként elveszíted a közönség jelentős részét.

Miért érdemes elhagyni az alkalmazásokat

• Forgalom elosztása. A kérelem alkalmazása nem mutatja az erőforrás részvételének szintjét. Más szóval, a program forgalma és a webhely nem kumulatív, ami az érdeklődés mutatójának csökkenéséhez vezet.
• Erőforrás anyagok integrálása. Ha kérelmet szerzett, akkor tovább kell töltenie a pénzt, hogy szinkronizálja az összes anyagot, vagy töltse ki a webhelyet, hogy továbbítsa a tartalmat is a programhoz. Ennek eredményeként újra elveszíted a pénzt és időt.

Hogyan készítsünk adaptív webhelytervezést

Először is meg kell tervezni az összes munkát. A folyamatban a tervezőnek képesnek kell lennie arra, hogy továbbítsa a lényegét és a kulcsfontosságú ötleteket, viszonylag kis kijelzőt és csak egy menüoszlopot alkalmazzon.

Szükség esetén az információs blokkok csökkentek, csak a legjelentősebb elemek maradnak. A kezdőknek szóló útmutató általában tartalmazza:

• MOBILE FIRST – DESIGNAL az elektronikus modulokhoz;
• Rugalmas képek – rugalmas képek használata;
• Rács alapú elrendezés – rugalmas mesh elrendezések használata;
• Média lekérdezések – Média kérés feldolgozása.

Hogyan lehet az oldal adaptív? Ehhez többféle elrendezést használhat.

• Radír. Ez a faj könnyű megvalósítható, ritkán is nehézségeket okoz az újoncoktól. A fő erőforrás blokkok vannak szorítva, amíg ez alkalmas a mobil képernyőjén. Ha a tömörítés lehetetlen, akkor szalag formájában kerülnek elhelyezve.
• Mozgó blokkok. Ez a technika hibátlan az erőforrások számára, amelyek különböző oszlopokkal rendelkeznek. A kiegészítő blokkok szállása változó figyelembe véve a képernyőképességeket. Ha a kijelző csökken, a Sidbars az alsó részre tolódik.
• Kapcsolási elrendezések. Ez egy meglehetősen időigényes technika, amely magában foglalja az egyes képernyőfelbontás speciális megteremtett elrendezésének használatát. Ez a módszer megkönnyíti a webhely tanulmányozását, de a munka összetettsége nem igényel.
• Elemi elrendezés. Módszertan, hibátlanul alkalmas egyszerű erőforrásokra. A tervező egyszerűen mérlegeli a képeket és a tipográfia. Bár ez a módszer nem hívható kereslet a rugalmasság hiánya ellen.
• Panelek. Ez a technika olyan mobilprogramokból származott, amelyekben egy segédmenü jelenhet meg bármely megjelenítési helyzetben. Most ez a módszer nem is nagyon népszerű, mert a mobil navigáció a webhelyen nem mindig világos a felhasználók számára.

A leírt elrendezések egyike sem nevezhető univerzálisnak. Hogyan lehet az oldal adaptív? Először is, a projektetől függően megfelelő elrendezést kell választani. Teljes mértékben meg kell felelnie az erőforrás-képességeknek, és megfelelnie kell az összes igénynek.

Hogyan készítsünk adaptív webhely elrendezést

Ma a CSS3 és a HTML5-t használják erre. Az első technológia a lépcsőzetes táblák jobb generációja. Amikor segítséget nyújt, az a szabályok, amelyekre a webhely adatait megjelenik a felhasználó kijelzőjén.

A CSS3 használatával több paramétert állíthat be: az egy bizonyos felbontásban lévő elem elfoglalt térének és méretének százalékos aránya. Ennek a technológiának köszönhetően a tervezők különböző osztályokat hozhatnak létre bizonyos jellemzőknek.

A HTML5 az egyes részek helyének jelzésére szolgál, más szóval, az oldal kiküldéséhez. A létrehozott CSS3 osztályok a HTML-címkékben vannak feltüntetve, hogy az alkalmazott objektumokat az engedélytől függően módosíthassák.

Tehát hogyan lehet adaptív webhely kialakítását HTML-vel? Meg kell kezdeni egy egyszerű kép kialakításával, ami aztán nyúlik.

Ez létrehoz egy héjat a képfeldolgozáshoz.

És hogyan lehet az oldal adaptív a CSS-vel? Adja meg az ilyen paramétereket:

Ezután a szélességben DIR-t állítsa be az IMG kép szélességét.

Így van egy kép, amely az egész diszperziós helyet bármilyen felbontással fogja elfoglalni.

Hab

Részvény: