The need for mobile-optimized websitesLesson 11, Mobile Design 2471 In your text editor, choose File > Open and navigate to the web11lessons folder. Locate
the 11_home.html fi le and click OK. Preview this page in your browser. You will use the
two-column design similar to the one at the end of Lesson 7.
The two-column design you will be optimizing for a mobile device.Close your browser and return to your text editor. You will now add a media query to
your base.css style sheet.
2 In your text editor, choose File > Open, locate the base.css style sheet, and click OK.
Scroll to the very bottom of the style sheet and add the following code:
@media only screen and (max-device-width:480px) {
}A media query is a new category that has been added to the CSS3 specifi cation. Most
browsers use the CSS 2.1 specifi cation and won’t recognize the code, so you should be
careful when adding CSS3 properties. However, in this case you are specifi cally targeting
mobile browsers such as the Safari web browser on the iPhone, as well as all other
mobile browsers that support CSS3, so you can use it.