CSS: Building responsive Web sites

• To create a scalable image

IMG tags omit set width and height, set max-width:100% in the style sheet,

• Create a resilient layout grid

The key to creating a resilient layout is to use percentages to set width instead of specifying a fixed width value

• Media Enquiry

Defined by: 1) <link rel= "href=" "Media=" ">

2) @media screen and (max-width<960px) {} In the style sheet

The most common is the Min-width max-width

• Understand visual areas and meta elements that use visual areas

The visual area (viewport) refers to the area where the browser displays the page.

<meta name= "viewport" content= "Width=device-width, initial-scale=1" >

• Compatible with older versions

Determine the browser version with conditional comments and choose a different style sheet

<!--[if GT IE 8]><link ....> <! [endif]-->//In addition to IE8 and below versions, the style sheet used

<!--[if Lt IE 9]> <link ...> <! [endif]-->//For IE9 and the following versions

　　　　

CSS: Building responsive Web sites