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

11 css media queries

on

  • 465 views

 

Statistics

Views

Total Views
465
Views on SlideShare
465
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 11 css media queries Presentation Transcript

  • 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 look like (layout here) . —  The buzzword for this is ...
  • 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" /> ◦  <link ... href="print.css" /> 2.  Have one stylesheet with separate sections ◦  The sections can have a conditional on them
  • 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
  • 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: 960px) {! ...! }! —  In the <head> section <link rel="stylesheet" media="screen and (max-width: 768px)" href="iPad.css" />!
  • 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 — 
  • 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 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
  • 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
  • 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