Media Query

Company :

Browzed Solutions India

Developed By:

Kadir H. Kapadiya

What is media query?

We can have different blocks of CSS code for different screen and device sizes.

In today's world, users view web pages on a wide range of screens. Screens can range from the large displays on their work stations, to their laptops on the air plane, to their iPad or other tablets while sitting in the park and finally on their small mobile phone screens on the go.

If you've styled print documents with CSS, then you are already familiar with defining different styles for different devices. With media queries, we'll take this to a new level. Rather than looking at what device it is, we will look at what capabilities the device has.

CSS Media queries allow you to apply changes to your sites design based on the viewing size and capability of the device on which your content is displayed.

 More specifically, we will look at the following:

height and width of the device

height and width of the browser

screen resolution

orientation of the device (for mobile phones and tablets; portrait or landscape)

Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen). It became a W3C recommended standard in June 2012. and is a cornerstone technology of Responsive Web Design.

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors)

Media Types:

1. All = Used for all media type devices

2. Screen = Used for computer screens

3. Print = Intended for paged material and for documents viewed on screen in print preview mode

4. Aural = Used for speech and sound synthesizers

5. Projection = Used for projected presentations, like slides

6. Tty = Used for media using a fixed-pitch character grid, like teletypes and terminals like

teletypes and terminals

7. Tv = Used for television-type devices

For Example :-

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

< link href="mobile.css" type="text/css" media=“print and (font-size: 20px)" rel="stylesheet"/>

In CSS :-

@media screen and (max-width : 480px){

#id{

float : none;

width : 60%;

background-color : #ffb3b3;

}

}

THANK YOU