11 css media queries

13
CSS Media Queries Using responsive design to make each page look good on any screen or on paper

description

 

Transcript of 11 css media queries

Page 1: 11 css media queries

CSS Media Queries Using responsive design to make each page look good on any screen or on paper

Page 2: 11 css media queries

�  PCs �  Tablets � Handhelds �  Books �  TV �  Printers � Glasses � Watches

Page 3: 11 css media queries

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

Page 4: 11 css media queries

This is a basic tenet

We have to separate data from

presentation

Page 5: 11 css media queries

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

Page 6: 11 css media queries

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

Page 7: 11 css media queries

Width is the other key

Page 8: 11 css media queries

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" />!

Page 9: 11 css media queries

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

Page 10: 11 css media queries

Detecting a smartphone

@media screen and (max-width: 650px)

Page 11: 11 css media queries

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

Page 12: 11 css media queries

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

Page 13: 11 css media queries

Further study

� Great article on a non-responsive alternative ◦  http://www.html5rocks.com/en/mobile/cross-

device/

� Detecting devices ◦  http://stackoverflow.com/questions/8037973/detect-

different-device-platforms-using-css