CSS Media Queries Using responsive design to make each page look good on any screen or on paper
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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 ...
This is a basic tenet
We have to separate data from
presentation
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/cross-
device/
� Detecting devices ◦ http://stackoverflow.com/questions/8037973/detect-
different-device-platforms-using-css
Related Documents
