Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).
Viewport—When using Media Queries you need to include a viewport otherwise you will not get the anticipated result.
Insert the following in head section:
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
Media Queries can be used to ensure that your site will work correctly regardless of the user’s screen size, origination, color and aspect ratio. Media Queries allow you to specify criteria that match the viewing device, a desktop/laptop, iPad, cell phone etc.
See Media Queries sample here.
@media screen and (max-width:980px)
@media screen and (max-width:768px)
@media screen and (max-width:480px)
Learn more about Responsive Web Design (reading assignment)
- Reading Assignment: Chapter 16, 17, 18, 19; CSS Quiz next class
- W3S CSS outline —CSS float