Published on: 28 June, 2014

Media Queries

Posted by andy | 1202 views 1 likes 1 favourites 0 comments
Tumblr Digg Google Plus

Media queries are simple conditions used to targetting different devices for tables, phones or desktop computers. As each device may have different view size, media queries become so handy to use to display the content dimension correctly.

Browser support for Media Queries

Media queries are supported by the following browsers: IE9+, Chrome 4+, Firefox 3.5+, Opera 9.5+, Safari 4+, Android 2.1+, iOS Safari 3.2+

How it works?

It is pretty simple, you just need to specify different dimension size wrap inside a dimension code block. It is like an if condition code block, where you just need to define the minimum width or maximum width or could be combination of both dimension together.

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
   /*** ENTER YOUR CSS CODE IN HERE ***/
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
   /*** ENTER YOUR CSS CODE IN HERE ***/
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
   /*** ENTER YOUR CSS CODE IN HERE ***/
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
   /*** ENTER YOUR CSS CODE IN HERE ***/
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
   /*** ENTER YOUR CSS CODE IN HERE ***/
}

If you prefer to separate the css into an external file, you can use the following sample code.

<link type="text/css" rel="stylesheet" href="mobile.css" media="only screen and (max-width: 320px)"/>

<link type="text/css" rel="stylesheet" href="tablet.css" media="only screen and (min-width: 769px) and (max-width: 960px)"/>

If you prefer to import the css directly from a css file, you can use the following sample code.

@import url(mobile.css) only screen and (max-width: 320px);
@import url(tablet.css) only screen and (min-width: 769px) and (max-width: 960px);
Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 13 July, 2016
Ever imagine that you can now easily create a bouncing ball using CSS3 only? No javascript or image is required to do this. Thanks to the powerful attribute of CSS3 animation.
Published on: 24 March, 2016
You probably never thought about creating a heart shape completely using CSS3. Furthermore, you can include an animation to show the heart is actually beating. This is can be easily done with CSS3 animation. No flash or images are required.