Download - Responsive Web Design Fundamentals
Responsive Design work flow
Mobile Viewports
Media Queries
Fluid grids
Implementation of Responsive Design
Responsive Design consideration
Lack of control
Wide verity of browsers and operating systems
Different size screen and devices
Fixed width designs
Explosion
Viewports
iPhone 3GS
Safari: 980pxOpera:850px
Default Scaling
320px fixed width web page
Fluid Grids
Media Queries
@media [not | only] screen [and] (expression){}
media="screen and (min-width:480px), screen and (orientation:landscape)"
<link rel="stylesheet" href="main.css" media="screen and (min-width:480px)">
@import url(example.css) screen and (max-width:480px);
@media only screen and (max-width:480px){p{color:white;background: rgb(117,15,25);}
}
Break-points
Thank You
http://www.opensourcetechnologies.com