CSS3 Media Queries and Creating Adaptive LayoutsBY SVITLANA IVANYTSKA

“As a web developer you should target multiple (all)

devices”

ADAPTIVE VS RESPONSIVE

ADAPTIVE VS RESPONSIVE

MAIN CONCEPTS OF ADAPTIVE DESIGN

progressive enhancement

mobile first

ADAPTIVE WEB DESIGN

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

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.”

MAJOR ASPECTS

SITE SPEED

COMPLEXITY OF DEVELOPMENT

SEO

MAIN PRINCIPLES

FLEXIBLE GRID-BASED LAYOUTS

FLEXIBLE MEDIA

MEDIA QUERIES

FLEXIBLE LAYOUTS

relative length units(%, em)

fixed measurement units(px or in)

FLEXIBLE GRIDtarget ÷ context = result

.container { width: 538px;}section, aside { margin: 10px;}section { float: left; width: 340px;}aside { float: right; width: 158px;}

CSS

<div class="container"> <section>...</section> <aside>...</aside></div>

HTML

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 */}

FLEXIBLE IMAGES

FLEXIBLE MEDIAimg, video, canvas { max-width: 100%;}

img { max-width: 100%; height: auto;}

.container{ overflow: hidden;}

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.”

DECLARE MEDIA QUERY

As in media types, there are three ways to invoke media-query-dependent styles:

<link rel="stylesheet" type="text/css" media="all and (color)" href="/style.css">

@import url("/style.css") all and (color);

@media all and (color) { /* one or more css rule here… */ }

First of all, as stylesheets in the link element of HTML:

In CSS stylesheets using @import rules:

And finally, using @media rules:

SYNTAX

@media type and (expression){ ... }

screen

printer tv

projector

css codeintegration

css ruleorientation

coloraspect ratio

resolution

width/height

MEET THE MEDIA TYPES: ALL

Description: All devices listen to this

MEDIA TYPE: SCREEN

Description: Used primary for color computer screens and smartphones.

MEDIA TYPE: PRINT

Description: Used for paged material and for documents viewed on screen in print preview mode.

MEDIA TYPE: TV

Description: Used for television-type devices (low resolution, color, limited-scrollability screens, sound available)

ADDITIONAL MEDIA TYPES

handheld projection braille embossed speech tty

MEET THE FEATURESThe following table contains the media features listed in the latest W3C recommendation for media queries.

Feature Value Min/Max Descriptionwidth length yes Display widthheight length yes Display heightdevice-width length yes Device widthdevice-height length yes Device heightorientation portrait or landscape no Device orientationaspect-ratio ratio (w/h) yes Ratio of width to heightdevice-aspect-ratio ratio (w/h) yes Ratio of device-width to device-heightcolor 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)

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) { ... }

MEDIA FEATURE: ORIENTATION

Value: <length>Media: handheld, print, projection, screen, tty, tv

@media screen and (orientation: portrait) { … }

@media screen and (orientation: landscape) { … }

MEDIA FEATURE: RESOLUTION

Value: <resolution>Media: handheld, print, projection, screen, tvAccepts 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) { ... }

LOGICAL OPERATORS

Using logical operators in media queries such as: AND

NOT

ONLY

OR (COMMA-SEPARATED LISTS)

@media all and (color) { ... }

@media not screen and (color) { ... }

@media only screen and (orientation: portrait) { ... }

@media all and (orientation: landscape), all and (min-width: 480px) { ... }

WEB BROWSER SUPPORT

SUPPORT OLD BROWSERS

css3-mediaqueries.js

make CSS3 Media Queries work in all browsers (JavaScript library) starts from:

IE 5+ Firefox 1+ Safari 2

EXAMPLE: NON-RESPONSIVE

https://www.apple.com/http://www.amazon.com/ https://www.usps.com/

EXAMPLE: RESPONSIVE

http://mediaqueri.es/

CSS3 MEDIA QUERIES ARE HERE TODAY!

A SINGLE WEBSITE

A SINGLE URL

EASY SEO AND MARKETING

LOW COST

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.