You can use media queries to specify CSS files based on the reported characteristics of a device (responsive design). The browser on a device checks the media query and uses the corresponding CSS file to display the web page.
For example, the following media query specifies the phone.css file for devices that are 300-320 pixels wide.
1 | <link href= "css/orig/phone.css" rel= "stylesheet" type= "text/css" media= "all and (min-width: 300px) and (max-width: 320px)" > |
For an extensive introduction to media queries see Don Booth’s article on the Adobe Developer Center www.adobe.com/go/learn_dw_medquery_don_en.
For more information on media queries from the W3C see www.w3.org/TR/css3-mediaqueries/.
In Dreamweaver, you can create a site-wide media query file, or a document-specific media query.
Site-wide media query file
Specifies display settings for all pages in your site that include the file.
The site-wide media query file acts as the central repository for all media queries in your site. After you create this file, link to it from pages in your site that must use the media queries in the file for their display.
Document-specific media query
The media query is inserted directly into the document, and the page is displayed based on the inserted media query.
-
It is possible that some devices do not report their actual width. To force devices to report their actual width, ensure that the option Force Devices To Report Actual Width is enabled.
The following code is inserted into your file when you choose this option.
1<meta name=
"viewport"
content=
"width=device-width"
>
-
Description
The description of the device for which the CSS file must be used. For example, phone, TV, tablet, and so on.
Min Width and Max width
The CSS file is used for devices whose reported width is within the specified values.
Opomba:
Leave either Min Width or Max Width blank if you do not want to specify an explicit range for a device. For example, it is common to leave Min Width blank if you want to target phones, which are 320px wide, or less.
Site-wide media query: For existing pages, ensure that you include the media query file in all the pages in the <head> tag.
Example of a media query link where mediaquery_adobedotcom.css is the site-wide media query file for the site www.adobe.com:
1 | <link href= "mediaquery_adobedotcom.css" rel= "stylesheet" type= "text/css" > |
Use this procedure to change the site-wide media queries file that you have set in the Media Queries dialog box.