Your SlideShare is downloading. ×
0
11 css media queries
11 css media queries
11 css media queries
11 css media queries
11 css media queries
11 css media queries
11 css media queries
11 css media queries
11 css media queries
11 css media queries
11 css media queries
11 css media queries
11 css media queries
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

11 css media queries

360

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
360
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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

×