CSS Media Queries
Using responsive design to make each page look good
on any screen or on paper
—  PCs
—  Tablets
—  Handhelds
—  Books
—  TV
—  Printers
—  Glasses
—  Watches
CSS3 Media queries can solve this
problem for us to an extent
We simply say if you're on a (device name
here) , make it lo...
We have to separate
data from
presentation

This is a
basic tenet
Two tactics
1. 

Have a different stylesheet for each view
◦  <link ... href="pc.css" />
◦  <link ... href="handheld.css" ...
The media attribute is a key
How it might look in our CSS

W3C-recognized types

@media print {!
/* Print layout here */!
...
Width is the other key
Combine them with "and" to point to
different screen types
—  In

the <style> or .css file:

@media screen and (max-width...
What things can you look for?
resolution
—  orientation
—  device-aspect-ratio
—  color | monochrome
— 

width
—  max...
Detecting a
smartphone

@media screen and
(max-width: 650px)
Some tips
—  Design

from content out, not layout in.
—  Layout the smallest screen first. Move to the
biggest
—  Scale...
Conclusion
—  Media

queries use the @media keyword
—  They allow us to apply different styles to
different media and di...
Further study
—  Great

article on a non-responsive alternative

◦  http://www.html5rocks.com/en/mobile/crossdevice/
—  ...
Upcoming SlideShare
Loading in...5
×

11 css media queries

379

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
379
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

11 css media queries

  1. 1. CSS Media Queries Using responsive design to make each page look good on any screen or on paper
  2. 2. —  PCs —  Tablets —  Handhelds —  Books —  TV —  Printers —  Glasses —  Watches
  3. 3. CSS3 Media queries can solve this problem for us to an extent We simply say if you're on a (device name here) , make it look like (layout here) . —  The buzzword for this is ...
  4. 4. We have to separate data from presentation This is a basic tenet
  5. 5. Two tactics 1.  Have a different stylesheet for each view ◦  <link ... href="pc.css" /> ◦  <link ... href="handheld.css" /> ◦  <link ... href="print.css" /> 2.  Have one stylesheet with separate sections ◦  The sections can have a conditional on them
  6. 6. The media attribute is a key How it might look in our CSS W3C-recognized types @media print {! /* Print layout here */! }! @media screen {! /* Screen layout here */! —  }! —  —  —  —  —  —  —  —  —  braille embossed handheld print projection screen speech tty tv 3d-glasses
  7. 7. Width is the other key
  8. 8. Combine them with "and" to point to different screen types —  In the <style> or .css file: @media screen and (max-width: 960px) {! ...! }! —  In the <head> section <link rel="stylesheet" media="screen and (max-width: 768px)" href="iPad.css" />!
  9. 9. What things can you look for? resolution —  orientation —  device-aspect-ratio —  color | monochrome —  width —  max-width —  min-width —  device-width —  max-device-width —  min-device-width —  all the above for height, too — 
  10. 10. Detecting a smartphone @media screen and (max-width: 650px)
  11. 11. Some tips —  Design from content out, not layout in. —  Layout the smallest screen first. Move to the biggest —  Scale images using max-width: X% —  When laying out tablets and phones, there is an orientation query orientation: landscape or portrait ◦  Don't ordinarily use it ◦  Better to rely on width only
  12. 12. Conclusion —  Media queries use the @media keyword —  They allow us to apply different styles to different media and different screen sizes —  We can use these to have responsive web designs that flex when browsed on different devices
  13. 13. Further study —  Great article on a non-responsive alternative ◦  http://www.html5rocks.com/en/mobile/crossdevice/ —  Detecting devices ◦  http://stackoverflow.com/questions/8037973/detectdifferent-device-platforms-using-css
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×