What is Media Query ?

There is rapid spread of the smartphone, tablet and other devices
Designers to design web site which match all of these device screens
Deleoplers has to write code to match this sizes

Now you will have questions like listed below
(1) How do i detect the device size?
(2) How can i change the layout if I can detect the device size

Media Query can give you answer for above two questions

(1) you can place following code inside your stylesheet and you can put css which will match your device
@media only screen and (max-device-width: 480px) {


or you can add seperate style sheet
<link rel=”stylesheet” type=”text/css” media=”only screen and (max-device-width: 480px)” href=”small-device.css” />

(2) If you want to change the layout of appearance of the HTML pages you have to change the style sheet


Browser Support
IE, Firefox, Crome, Safari, Opera,iOS Safari,Opera Mini,Opera Mobile,Android Browser

This entry was posted in HTML and JS Framework. Bookmark the permalink.