This document discusses creating adaptive layouts using CSS3 media queries. It defines the differences between adaptive and responsive design, with adaptive using predefined layouts for different screen sizes and responsive providing an optimal experience across devices. Key concepts for adaptive design are progressive enhancement and mobile-first. The document outlines main principles like flexible grid-based layouts, flexible media, and using media queries to apply CSS styles based on features like width, height, and orientation. It provides examples of media query syntax and supported media features.

1. CSS3 Media Queries and
Creating Adaptive Layouts
BY SVITLANA IVANYTSKA

2. “As a web developer you should target
multiple (all) devices”

3. ADAPTIVE VS RESPONSIVE

4. ADAPTIVE VS RESPONSIVE

5. MAIN CONCEPTS OF
ADAPTIVE DESIGN
progressive enhancement
mobile first

6. ADAPTIVE WEB DESIGN
“Adaptive Web Design (AWD) uses predefined layouts
that have been carefully constructed for a variety of
screen sizes.”

7. RESPONSIVE WEB DESIGN
“Responsive web design (RWD) is a web design
approach aimed at crafting sites to provide an optimal
viewing experience across a wide range of devices.”

8. MAJOR ASPECTS
 SITE SPEED
 COMPLEXITY OF DEVELOPMENT
 SEO

9. MAIN PRINCIPLES
 FLEXIBLE GRID-BASED LAYOUTS
 FLEXIBLE MEDIA
 MEDIA QUERIES

10. FLEXIBLE LAYOUTS
relative length units
(%, em)
fixed measurement units
(px or in)

11. FLEXIBLE GRID
target ÷ context = result
HTML
<div class="container">
CSS
.container {
width: 538px;
}
section, aside {
margin: 10px;
}
section {
float: left;
width: 340px;
}
aside {
float: right;
width: 158px;
}
<section>...</section>
<aside>...</aside>
</div>
section, aside {
margin: 1.858736059%;
/* 10px ÷ 538px = .018587361 */
}
section {
float: left;
width: 63.197026%;
/* 340px ÷ 538px = .63197026 */
}
aside {
float: right;
width: 29.3680297%;
/* 158px ÷ 538px = .293680297 */
}

12. FLEXIBLE IMAGES

13. FLEXIBLE MEDIA
img, video, canvas {
max-width: 100%;
}
img {
max-width: 100%;
height: auto;
}
.container{
overflow: hidden;
}

14. MEDIA QUERIES
“Media Queries is a CSS3 module allowing content
rendering to adapt to a specific range of output
devices without having to change the content itself.”

15. DECLARE MEDIA QUERY
As in media types, there are three ways to invoke media-query-dependent styles:
 First of all, as stylesheets in the link element of HTML:
<link rel="stylesheet" type="text/css" media="all and (color)" href="/style.css">
 In CSS stylesheets using @import rules:
@import url("/style.css") all and (color);
 And finally, using @media rules:
@media all and (color) { /* one or more css rule here… */ }

16. SYNTAX
screen
projector
color
width/height
@media type and (expression){ ... }
printer
tv
css code
integration
css rule orientation
aspect ratio
resolution

17. MEET THE MEDIA TYPES: ALL
 Description: All devices listen to this

18. MEDIA TYPE: SCREEN
 Description: Used primary for color computer screens and smartphones.

19. MEDIA TYPE: PRINT
 Description: Used for paged material and for documents viewed on screen in print
preview mode.

20. MEDIA TYPE: TV
 Description: Used for television-type devices (low resolution, color, limited-scrollability
screens, sound available)

21. ADDITIONAL MEDIA TYPES
 handheld
 projection
 braille
 embossed
 speech
 tty

22. MEET THE FEATURES
The following table contains the media features listed in the latest W3C recommendation
for media queries.
Feature Value Min/Max Description
width length yes Display width
height length yes Display height
device-width length yes Device width
device-height length yes Device height
orientation portrait or landscape no Device orientation
aspect-ratio ratio (w/h) yes Ratio of width to height
device-aspect-ratio ratio (w/h) yes Ratio of device-width to device-height
color integer yes Number of bits per color component
color-index integer yes
Number of entries in the output device’s
color lookup table
monochrome integer yes
Number of bits per pixel in the monochrome
frame buffer
resolution resolution yes
Density of pixels of output device, (integer
followed by dpi or dpcm)

23. MEDIA FEATURE: WIDTH/HEIGHT
Value: <length>
Media: all, but not speech (visual, tactile)
Accepts min/max prefixes: yes
/* width */
@media screen and (max-width: 600px) { ... }
@media screen and (min-width:200px) and (max-width:400px) { ... }
/* height */
@media screen and (max-height:768px) { ... }
@media (min-height:500px) and (max-height:580px) { ... }

24. MEDIA FEATURE: ORIENTATION
Value: <length>
Media: handheld, print, projection, screen, tty, tv
@media screen and (orientation: portrait) { … }
@media screen and (orientation: landscape) { … }

25. MEDIA FEATURE: RESOLUTION
Value: <resolution>
Media: handheld, print, projection, screen, tv
Accepts min/max prefixes: yes
/* apply to devices with at least 300 dots per inch of resolution: */
@media print and (min-resolution: 300dpi) { ... }
/* to replace the old (min-device-pixel-ratio: 2) syntax: */
@media screen and (min-resolution: 2dppx) { ... }

26. LOGICAL OPERATORS
Using logical operators in media queries such as:
 AND
 NOT
 ONLY
@media all and (color) { ... }
@media not screen and (color) { ... }
@media only screen and (orientation: portrait) { ... }
 OR (COMMA-SEPARATED LISTS)
@media all and (orientation: landscape),
all and (min-width: 480px) { ... }

27. WEB BROWSER SUPPORT

28. SUPPORT OLD BROWSERS
css3-mediaqueries.js
make CSS3 Media Queries work in all browsers (JavaScript library) starts from:
 IE 5+
 Firefox 1+
 Safari 2

29. EXAMPLE: NON-RESPONSIVE
http://www.amazon.com/ https://www.apple.com/ https://www.usps.com/

30. EXAMPLE: RESPONSIVE
http://mediaqueri.es/

31. CSS3 MEDIA QUERIES ARE
HERE TODAY!
 A SINGLE WEBSITE
 A SINGLE URL
 EASY SEO AND MARKETING
 LOW COST

32. RESOURCES
 Aaron Gustafson, Adaptive Web Design: Crafting Rich Experiences with Progressive
Enhancement. — Easy Readers, 2011.
 Ben Frain, Responsive Web Design with HTML5 and CSS3. — Packt Publishing Ltd,
2012.
 Ethan Marcotte, Responsive Web Design. — A Book Apart, 2011.
 Luke Wroblewski, Mobile First. — A Book Apart, 2011.