HTML5 and CSS3 in Dreamweaver CS5.5 – Part 3: Using CSS media queries to target different screen resolutions
This is Part 3 of a three-part tutorial series exploring the HTML5 and CSS3 features in Dreamweaver CS5.5. In Parts 1 and 2, you built and styled a web page for a fictional restaurant, Citrus Café, using HTML5 structural elements and CSS3 properties, including rounded corners, and text and box shadows. In this final part, you'll optimize the page for display in devices at smaller resolutions, using CSS media queries and a site-wide media queries file. CSS media queries let you target style rules for different devices by specifying conditions, such as the maximum and minimum screen width. You need only one version of the HTML markup; the main styles are in a style sheet that's served to all devices; those with smaller screen resolutions get different styles that override some properties. To follow this tutorial, you should have completed Parts 1 and 2. At the end of Part 2, you had styled the home page of the Citrus Cafe website for optimal display in a desktop computer (see Figure 1).
Related: responsive design