Responsive Design
Responsive Design:
In this section we will look at designing a web page to be resomsive tom mobile devices. When we look at the CSS below, most of it has standard styling elements. However we do find two @media sections. These sections are:
/* For screens less than 700px */
@media screen and (max-width:700px) {
#content {
width:auto;
float:none;
}
}
/* For screens less than 480px */
@media screen and (max-width:480px) {
#header {
height:auto;
}
h1 {
font-size:24px;
}
#sidebar {
display:none;
}
}
These two sections give different styling elements depending on what size screen is being used to view the website. When the viewer has a screen size of less than 700px, the first @media section will be utilized. When the viewer uses a smaller device, like a smartphone, with a screen size less than 480px, the second @media section will be utilized. The best way to see these sections in action is to open the above link, and resize the browser in your monitor. When you make the browser page smaller, you will be able to see the elements move and the picture shrink to accommodate the resizing of the screen. This is an example of responsive web design.