Notes: How to cater for different devices/different screen sizes
Adaptive Web Design = Elements snap between different layouts (using static units)
Breakpoints allow the layout to change at predefined points.
By using nesting elements, you can make it so collections of onscreen elements adapt to a shrinking or expanding screen as one, instead of individually.
max-width: percentage OR pixels (if pixels they will scale until the element reaches that width, then they will stay that size)
display: none; (hides an element)
Responsive Web Design Resources
Meta viewport element (you always want one):
Add this to the <head> of the document. Ensures correct scaling when viewing site on mobile.
<meta name=viewport content="width=device-width, initial-scale=1">
Example media queries (pick one):
Attaches a stylesheet named ‘big.css’ as long as the browser width is greater than 640px.
<link href="big.css" rel="stylesheet" type="text/css" media="(min-width:640px)">
Attaches a stylesheet named ‘mobile.css’ as long as the browser width is less than 640px.
<link href=“mobile.css” rel="stylesheet" type="text/css" media=“(max-width:640px)">
No comments:
Post a Comment