A klasszikus Skeleton template…A Skeleton template (www.getskeleton.com) a közelmúlt nagyon felkapott template-je, nagyon jól szemlélteti a media queries használatát.
Csapjunk is bele a lecsóba, ez lesz érdekes nekünk a templateből – ha már kipróbálgattuk a képernyő szélességének macerálását.
A kiemelt sorokban láthatjuk, hogy egyszerűen, a képernyőszélességek minimum és maximum értékeinek megadásával megy a legkisebb értéktől (max-width: 479px) a legnagyobbig (max-width: 959px). Ha a képernyőszélesség 959px-nél nagyobb, a megadott media queriesben lefektetett szabályok (a lenti példában a /*css*/ helyén vannak), NEM fognak érvényesülni.

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) { /*css*/ }

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) { /*css*/ }

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) { /*css*/ }

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) { /*css*/ }

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) { /*css*/ }

Természetesen 959px-en túl is van élet – illetve az odavonatkozó css szabályok – de media queries nélkül. Ha nem hiszed, nézd meg ezt a linket:

http://www.getskeleton.com/src/stylesheets/skeleton.css

Struktúra

Igazából rém egyszerű. Igazából 16 oszlopról (classról .column,.columns) van szó.
A body tagon belül az elemeket egy div.container tárolja.
Külön-külön meg is adja a szélességet minden media queryben így ni:

  .container .one.column,
  .container .one.columns       { width: 28px; }
  .container .two.columns       { width: 76px; }
  .container .three.columns     { width: 124px; }
  .container .four.columns      { width: 172px; }
  .container .five.columns      { width: 220px; }
  .container .six.columns       { width: 268px; }
  .container .seven.columns     { width: 316px; }
  .container .eight.columns     { width: 364px; }
  .container .nine.columns      { width: 412px; }
  .container .ten.columns       { width: 460px; }
  .container .eleven.columns    { width: 508px; }
  .container .twelve.columns    { width: 556px; }
  .container .thirteen.columns  { width: 604px; }
  .container .fourteen.columns  { width: 652px; }
  .container .fifteen.columns   { width: 700px; }
  .container .sixteen.columns   { width: 748px; }

Az .offset-by-one … .offset-by-fifteen classok csak “behúzásra” használatosak, nem túl izgalmasak.

Őszintén megvallva, szép, szép, de egy kicsit sok a jóból. Lehetne rövidebb ez a sok css?*

* A következő postban erre térünk ki.
http://blog.blackmill.eu/skeleton-template-szazalekokkal/