11 css media queries
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

11 css media queries

on

  • 504 views

 

Statistics

Views

Total Views
504
Views on SlideShare
504
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

11 css media queries Presentation Transcript

  • 1. CSS Media Queries Using responsive design to make each page look good on any screen or on paper
  • 2. —  PCs —  Tablets —  Handhelds —  Books —  TV —  Printers —  Glasses —  Watches
  • 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. We have to separate data from presentation This is a basic tenet
  • 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. 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. Width is the other key
  • 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. 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. Detecting a smartphone @media screen and (max-width: 650px)
  • 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. 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. 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