Liferay - Responsive Web Design - Blog

Vissza

Liferay - Responsive Web Design

Ákos Gábriel

2015.06.02. 13:49

A pontos megfogalmazást a Wikipedián lehet elolvasni.

Hogyan tudhatjuk meg, hogy egy weboldal Responsive-e? Nagyon egyszerűen, húzzuk összébb horizontálisan a böngészőnket. Ha a weboldal tartalma dinamikusan változik, átrendeződik, akkor megtaláltuk.

Sajnos még nagyon kevés oldal készült el ezzel a technológiával, pedig ez a jövő. Gondoljunk bele mennyi eszköz van már ami böngészésre képes, és ezen eszközök száma rohamosan nőni fog és változni fog a felbontásuk is.

A legegyszerűbb megoldás lenne a media query használata (CSS3 specifikáció), de sajnos a régebbi böngészők nem támogatják.

Egyik lehetőségünk a használatára, hogy az adott felbontáshoz írt stíluslapjainkat a media attribútumban megfogalmazott szabályok alapján linkeljük be az oldalunkba:

<link href="custom_480.css"
  media="screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css"
  media="screen and (min-device-width: 480px) and (max-device-width: 720px))"
  href="custom_720.css" />

A másik lehetőségünk, hogy magában a stíluslapban különítjük el a stílusbejegyzéseinket a @media szabály segítségével:

@media screen and (max-device-width: 480px) {
  .MyClass {
    float: none;
  }
}

Akit bővebben érdekkel, keressen rá, vagy olvassa el Ethan Marcotte 2010-es blog bejegyzését, amit mindenkinek tudok ajánlani.

A media query-t a régebbi böngészők nem támogatják. Mi van akkor, ha mi mégis azt szeretnénk, hogy a weboldalunk a lehető legtöbb böngészőben optimálisan jelenjen meg? A megvalósításához nem kerülhetjük el a JavaScript használatát. Nézzük, milyen lehetőségünk van Liferay alatt.

Aki Liferay 6.0 EE SP2, vagy 6.1 CE előtti verzióval dolgozik, annak egy JavaScriptet tudok ajánlani, ami folyamatosan detektálja a felbontást. Alapból négyféle felbontást kezel (320, 480, 720, 960), de tetszés szerint átírható, bővíthető. Amint a belinkeljük a portal_normal.vm-ünkbe, deploy után megjelenik a <html> tag class-ai között a vp+felbontás classname. Megfigyelhető, hogy a böngésző horizontális összehúzásával hogyan változik az említett classname. Ezután nincs más dolgunk, mint az adott felbontás alá megfogalmazni az eltérő stílusbejegyzéseinket.

body {width: 960px;}
.vp720 body {width: 720px;}

A Liferay jóvoltából a 6.1 CE verzió már tartalmaz egy megoldást számunkra, ez pedig az AUI. Nincs más dolgunk, mint az oldalba beilleszteni a következőt:

<script type="text/javascript">
	AUI().use('aui-viewport');
</script>

A működése hasonló az előbb említett JavaScripthez, csak a classname-ben térnek el.

.aui-view-720 body {width: 720px;}

Használatáról Nate Cavanaugh írt egy tömör és érthető blog bejegyzést, melyet érdemes elolvasni.

Ezzel már megalkothatjuk az első Responsive Web Design alapján készült web site-unkat Liferay alatt is.

6477 Megtekintés 0 Megjegyzések

Átlagos (0 Szavazatok)

Megjegyzések

Még nincsenek hozzászólások. Légy első!

Címkefelhő

Legutóbbi bloggerek

Adrienn Keszőcze Bejegyzések: 3 Csillagok: 0 Dátum: 2021.01.26.
Pál Dobosi Bejegyzések: 3 Csillagok: 0 Dátum: 2021.01.13.
László Németh Bejegyzések: 1 Csillagok: 0 Dátum: 2020.11.17.
Bernadett Bertalanné Szemes Bejegyzések: 2 Csillagok: 0 Dátum: 2020.10.20.
Sándor Salamon Bejegyzések: 1 Csillagok: 0 Dátum: 2020.10.14.