Adaptive css saját kezét
Fejlesztése során a projekt, néztem egy feladat végrehajtása egy adaptív elrendezést. HTML-oldal kell egy másik megjelenés különböző méretben kapható. Ugyanakkor, meg kellett, hogy könnyű, így nehéz használni css-keretek nem akar. Így saját kerékpár született, hogy szeretném megosztani habrasoobschestvom. Talán ezek a megoldások már léteznek, de nem tudom róluk.
A következő megközelítés. Először is, a HTML jelölt blokkok befolyásolhatják az oldal mérete. Ez úgy történik, hogy egy további osztály „scr”. Aztán, CSS, határozza meg a különböző méretű kijelző ezeket a blokkokat. Lehetőség van, hogy egy külön CSS-fájlban.
Csak annyit kell végrehajtani, ez egy néhány sornyi kódot és a JS-könyvtár jQuery (esetemben használtam JQLite - lecsupaszított változata jQuery).
Így a JS-script:
Mi a szkript. Meghatározza az aktuális oldal méretét, és induláskor, vagy ha átméretezés, minden elem jelölt az osztály „scr” extra osztály „scr-XX.” Amennyiben XX - különböző, attól függően, hogy a méret és az oldal lehet:
- scr-xs - mobil eszközök (<768px)
- SCR-sm - lemezek (≥768px)
- SCR-MD - hagyományos képernyők (≥992px)
- scr-lg - nagy képernyők (≥1200px)
Mint látható, a méretek venni a CSS-keret Bootstrap.
Most, hogy meghatározza az elemek viselkedését különböző méretben, szükséges, hogy leírja azokat a CSS. Sőt, lehetséges, csak arra, hogy mi fog változni, a többi örökölt az eredeti definíció elem. A változás blokk, ahogy tetszik, beleértve a rejtett (display: none).
Itt módosíthatja az elem „my_block” osztályú. A lemezeket fogja változtatni a betűméretet és szélességét. És ez lesz rejtve minden a mobil eszközök.
Előnye ennek a megközelítésnek:- Először is, az egyszerűség. Nem kell telepíteni további könyvtárak és keretek között. Ez csak minimális változást HTML.
- Másodszor, a fedezet. Régi helyén lehet tenni könnyen alkalmazkodó, anélkül, hogy elszakadna a visszafelé kompatibilitás.
- Harmadszor, ez a módszer több szemantikailag helyes, mint például az azonos Bootstrap. A kijelző egység leírt CSS, HTML helyett.
nemiro kéri. A kód lehet egyszerűsíteni hozzáadásával osztály «src» csak html tag, illetve az apró változásokat a script:
Ebben az esetben meg kell adnia a CSS tulajdonságokat, mint a „Scr-sm .my_block”.