Adaptive layout is a common form of web page design, adaptive layout can be based on the size of the browser window, automatically change its width and height values, is a very flexible layout, a good adaptive layout site for different resolution of the display can provide the best display effect. In fact, the div default state occupies the entire line of space, is the width of 100% adaptive layout of the expression, a list of adaptive layout needs to do the work is also very simple, just want to change the width from a fixed value to the form of a percentage value.
Copy Code code as follows:
#layout {
border:2px solid #A9C9E2;
Background-color: #E8F5FE;
height:200px;
width:80%;
}
CSS in most of the value as a parameter of the style properties are provided, width width of the property is no exception, where we will be width from a column fixed width of 300px, to 80%, from the bottom of the preview effect can be seen, the width of the DIV has become the browser width of 80% of the value. The adaptive advantage is that when you enlarge or shrink the browser window, its width will also remain in proportion to the current width of the browser.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>aa25. Cn_ a list of adaptive widths </title> <style type= "Text/css" > <!--#layout {border:2px solid #A9C9E2; Background-color: #E8F5FE; height:200px; width:80%; }--> </style> </pead> <body> <div id= "Layout" > a list of adaptive widths (AA25. CN) </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Used only when setting the width from the original 300px, to 80%.
