Domů › Media Queries

Media Queries

Vlastosti CSS3 Media Queries:

  • width – šířka cílové oblasti výstupního zobrazovacího zařízení (viewport) včetně případných posuvníků
    • obrazovka nebo projektor (u prohlížečů režim zobrazení Celá obrazovka) s výřezem o šířce minimálně 980px (grafický návrh by měl v tomto případě počítat s šířkou 960px)
    • <link rel="stylesheet" type="text/css" media="screen and (min-width: 960px), projection and (min-width: 960px)" href="screen-projection-960.css" />
      @media screen and (min-width: 960px),
projection and (min-width: 980px) { …STYLES… }
    • .info (Drupal)
    • stylesheets[screen and (min-width: 480px) and (max-width: 760px)][] = design/screen-480-760.css

stylesheets[screen and (min-width: 960px)][] = design/screen-960.css
  • height
  • device-width – šířka výstupního zobrazovacího zařízení (bez ohledu na velikost okna)
  • device-height
  • orientation – na výšku, na šířku
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

Nativní podpora: IE9+, Firefox 3.5+, Safari 3+, Chrome, Opera 7+, iOS Safari 3.2+, Opera Mini 5+, Opera Mobile 10+, Android Browser 2.1+

Přehled některých zařízení a prohlížečů
Device CSS px Actual px Device pixel ratio dpi
iPhone 2,3 320x480 320x480 1  
iPhone 4 320x480 640x960 2 192
iPhone 5 320x568 640x1136 2 192
iPad mini, 1, 2 768x1024 768x1024 1  
iPad 3, 4 768x1024 1536x2048 2 192
Android 2.3     1.5 144
Android 4.1     2 192
Windows 8 Phone        
Interenet Explorer on Windows Phone 8       96 ???
Opera Mini        
Firefox OS        
Firefox for Mobile (Fennec)        
Google Nexus 7     1.3 124.8
Playbook        

Příklad Media Queries pro Tablet:

@media
(min-width: 44em)  { /* ...STYLES... */}

Příklad Media Queries pro Tablet s Retina displejem:

@media
(min-width: 44em) and (-webkit-min-device-pixel-ratio: 1.25),
(min-width: 44em) and (min-resolution: 120dpi) { /* ...STYLES... */}
@media
(min-width: 44em) and (-webkit-min-device-pixel-ratio: 1.3),
(min-width: 44em) and (min-resolution: 124.8dpi) { /* ...STYLES... */}
@media
(min-width: 44em) and (-webkit-min-device-pixel-ratio: 1.5),
(min-width: 44em) and (min-resolution: 144dpi) { /* ...STYLES... */}
@media
(min-width: 44em) and (-webkit-min-device-pixel-ratio: 2),
(min-width: 44em) and (min-resolution: 192dpi) { /* ...STYLES... */}
Responsive web design layout
  Smartphone Tablet Desktop TV
Rozlišení zařízení (velikost okna aplikace) [px] 320x480 portrait 480x320 landscape 768x1024 portait 1024x768 landscape 1280x960(1024) 1680 3456
Bod zlomu (break point) 320 480 650, 700, 704, 740, 767, 768 979, 980, 1024 1025, 1120, 1200, 1220   3456
Maximální šířka objektu (při 10px okraji) 300 460 720 960 1200   3436
Šířka sloupce při gridu 12 (max. šířka/12) (320) (480) 60 80 100    
Téma Omega 3 global global >=740 (narrow)

740-840 (narrow landscape)

>=980 (normal)

=1024 (normal landscape)

 >=1220    
Téma Omega 4     >=44em
(16px * 44em ~ 704px)		   >=70em
(16px * 70em ~ 1120px)		    
Téma AdaptiveTheme <=320 321-480 481-768 796-1024 >=1025    
Bootstrap   <=480 <=767 768-979 >=1200    
Foundation              
templatemonster.com 320 480 768 980      

Podporu je možné rozšířit pomocí JavaScript knihovny css3-mediaqueries.js i na IE 5+, Firefox 1+ and Safari 2 (umožňuje navíc i podporu průhlednosti u PNG obrázků).

Tipy

Poznámky:

  • otestovat, zda je nutné uvádět vlastnost projection