U članku Responsive web dizajn pisali smo o tome kako prilagoditi prikaz web stranice ovisno o dimenzijama zaslona uređaja s kojeg korisnik pregledava web stranicu. Jedan prilagodljiv raspored web stranice za sve moguće verzije rezolucija i uređaja. Konstatirali smo da prilikom izrade web stranice možemo koristiti tzv. Media Queries kako bi aktivirali ili deaktivirali određene CSS klase (pravila) u CSS dokumentu.
U članku RWD savjet – koristite CSS frameworke i predloške smo pisali kako korištenjem raznih CSS frameworka možete jednostavnije pokrenuti svoj responsive web. Danas ćemo vam predstaviti nekoliko osnovnih predložaka Media query-ja koje možete koristiti u svojim web projektima.
Čemu služe Media queries ?
Recimo da želite (pod)naslove) u svojem članku ili na stranici za koje koristite tzv. H1 tag prilagoditi prikazu na zaslonu smartphona ili tableta. Ako je veličina fonta H1 taga označena u pixelima, npr. 34px , i to za prikaz na desktopu, taj bi isti H1 na malenom zaslonu smartphona izgledao predimenzionirano. Zato ćemo skalirati H1 tag i smanjivati font-size ovisno o tome na kakvom se ekranu prikazuje.
Slijedi primjer selektora iz najnovijeg Bootstrapa v.3:
@media(min-width:1200px){
h1 {font-size:34px}
}
@media(min-width:992px){
h1 {font-size:32px}
}
@media(min-width:768px){
h1 {font-size:28px}
}
@media(max-width:767px){
h1 {font-size:26px}
}
[clear]
Budite vrlo oprezni kako elementi stranice ne bi postali (pre)minijaturni na malim zaslonima.
Skeleton Media queries
Jedan od kvalitetnih CSS frameworka na tržištu zove se Skeleton. Media X koristi dijelove Skeleton frameworka (layout.css-a ) koji su zaduženi za responsive layout. Korisitimo slijedeće media query-je:
/* #Tablet (Portrait)
================================================== */
/* Dizajn za širinu od 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
/* Stilovi idu ovdje */
}
/* #Mobile (Portrait)
================================================== */
/* Dizajn za širinu od 320px */
@media only screen and (max-width: 767px) {
/* Stilovi idu ovdje */
}
/* #Mobile (Landscape)
================================================== */
/* Dizajn za širinu od 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* Stilovi idu ovdje */
}
/* #Mobile (Media X custom queries)
================================================== */
@media (max-width: 640px){
/* Stilovi idu ovdje */
}
@media (max-width: 540px) {
/* Stilovi idu ovdje */
}
@media (max-width: 479px) {
/* Stilovi idu ovdje */
}
@media (max-width:400px){
/* Stilovi idu ovdje */
}
@media (max-width:360px){
/* Stilovi idu ovdje */
}
[clear]
iOS Media queries
Slijede primjeri media query-ja koje možete koristiti za optimizaciju prikaza sadržaja web stranice na Apple-ovim uređajima.
Napomena: ne treba koristiti sve navedene query-je! Ukoliko ciljano prilagođavate layout sadržaja za prikaz na određenom uređaju (horizontalan ili vertikalan prikaz), koristite adekvatan query.
iPad vertikalno i horizontalno
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{
// CSS Styles
}
iPad horizontalno
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
{
/* Stilovi idu ovdje */
}
iPad vertikalno
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
{
/* Stilovi idu ovdje */
}
Za stilove za iPad 3 i 4 s Retina zaslonom morate provjeriti tzv. device pixel ratio.
Retina iPad vertikalno i horizontalno
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2)
{
/* Stilovi idu ovdje */
}
Retina iPad horizontalno
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2)
{
/* Stilovi idu ovdje */
}
Retina iPad vertikalno
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2)
{
/* Stilovi idu ovdje */
}
Za stilove za iPad 1 i 2 morate provjeriti koristi li uređaj niži pixel ratio.
iPad 1 & 2 vertikalno i horizontalno
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)
{
/* Stilovi idu ovdje */
}
iPad 1 & 2 horizontalno
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)
{
/* Stilovi idu ovdje */
}
iPad 1 & 2 vertikalno
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
/* Stilovi idu ovdje */
}
iPad Mini ima istu rezoluciju i pixel ratio kao iPad 1 i 2.
iPad Mini vertikalno i horizontalno
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)
{
/* Stilovi idu ovdje */
}
iPad Mini horizontalno
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)
{
/* Stilovi idu ovdje */
}
iPad Mini vertikalno
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)
{
/* Stilovi idu ovdje */
}
iPhone 5 vertikalno i horizontalno
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
{
/* Stilovi idu ovdje */
}
iPhone 5 horizontalno
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape)
{
/* Stilovi idu ovdje */
}
iPhone 5 vertikalno
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait)
{
/* Stilovi idu ovdje */
}
iPhone 2G-4S vertikalno i horizontalno
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{
/* Stilovi idu ovdje */
}
iPhone 2G-4S horizontalno
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape)
{
/* Stilovi idu ovdje */
}
iPhone 2G-4S vertikalno
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait)
{
/* Stilovi idu ovdje */
}
[clear]
Izvor za iOS queries: www.paulund.co.uk. Thanks!
Kako isključiti CSS3 animacije za određene uređaje ?
Da u početku razjasnimo: CSS3 animacije su odlična stvar i toplo ih preporučujemo. No, ponekad na malim zaslonima CSS3 animacije mogu izgledati “ružno” te osim oku mogu čak smetati u funkcionalnosti stranice. Za prikaz na smartphonima i tabletima preporučujemo čist i jednostavan raspored elemenata i tipografije. Kako biste ukolinili CSS3 animacije na malim zaslonima možete koristiti slijedeća CSS pravila, tj. dodati ih u pripadajući media query (ovisno o veličino zaslona).
{
/*CSS transforms*/
-o-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
/*CSS transitions*/
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
/*CSS animations*/
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}
[clear]