2. 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.
3. 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)
4. 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
5. 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;
}
}
