Adaptive layout is a common layout 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, good self-adaptive layout site for different resolutions of the display can provide the best results. In fact, the default state of the Div occupies the entire line of space, is the width of 100% of the expression of the adaptive layout, a list of adaptive layout needs our work is very simple, only need to change the width from a fixed value to the form of a percentage value.
Copy CodeThe code is as follows:
#layout {
border:2px solid #A9C9E2;
Background-color: #E8F5FE;
height:200px;
width:80%;
}
CSS in most of the values as parameters of the style properties are provided as a percentage, Width Width property is no exception, here we will be the width of a fixed width of 300px, changed 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 advantage of self-adaptation is that when the browser window size is enlarged or narrowed, its width is also maintained at the ratio of the browser's current width.
<textarea id="runcode21845"><! 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> A column of adaptive widths (AA25. CN) </body> </ptml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
Only use the original 300px when setting the width, change to 80%.
