##Responsive Web Page
###Becoming Responsive
target ÷ context = result
###Flexible Grid ####Flexible Font use em/rem as unit of font-size
h1 {
font-size: 2em;
}
####Fluid Grid
- change pixel to percentage
- grid system
###Flexible Images
img {
max-width: 100%;
}
###Media Queries ####Media type all, screen, print...
<link rel="stylesheet" href="style.css" media="screen">
@media screen {}
####Media query
@media only screen and (max-width: 640px) {
img {
max-width: 100%;
}
}
####Viewpoint
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
####Retina
@media only screen and (-webkit-min-device-pixel-ratio: 2) {}
##Reference ###Readings responsive-web-design ###Tools