Responsive web design uses CSS media queries and media types to change the appearance of a website depending on the device, while keeping the same HTML. Media types allow specifying different styles for different media like screen or print. Media queries check device features like width, height, orientation and resolution to apply tailored styles. They can be used to deliver different style sheets to desktops, laptops, tablets and mobile phones.

1. Responsive Web Design
Media Types and Media Queries

2. Responsive Web Design
 Helps you to change the appearance of
your site for different devices while the
HTML remains the same (although some of
it may be hidden)

3. Media Types and Media Queries
 CSS Media Types allow us to decide what a page should look
like.
 Depending on the kind of media being used to display the page.
 Media Queries allow us to format our content to specific
output devices.
 Media queries include:
 A media type and
 Expression
(Which checks the media features of the output device.)
Browser Support

4. Media Types

5. Media Queries
 Media queries can be used to check many things, such
as:
 width and height of the viewport
 width and height of the device
 orientation (is the tablet/phone in landscape or
portrait mode?)
 resolution
Using media queries are a popular technique for
delivering a tailored style sheet to desktops, laptops,
tablets, and mobile phones (such as iPhone and Android
phones).

6. Media Queries(Cont…)
 Media Queries Syntax:
@media not|only mediatype and (expressions) {
CSS-Code;
}

7. Media Queries(Cont…)

8. Media Queries(Cont…)

9. Media Queries(Cont…)
 Example:

10. Media Queries(Cont…)

11. Media Queries(Cont…)

12. Time for Some
Real Examples