分享一个自适应例子 代码是： <!doctype html><htm - Assbbs

分享一个自适应例子 代码是： &lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;!-- viewport meta to reset iPhone inital scale --&gt;&lt;meta name="viewport" …

分享一个自适应例子 代码是： &lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;!-- viewport meta to reset iPhone inital scale --&gt;&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;&lt;title&gt;Demo: Responsive Design in 3 Steps&lt;/title&gt;&lt;!-- css3-mediaqueries.js for IE8 or older --&gt;&lt;!-- if lt IE 9 &gt;&lt;script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"&gt;&lt;/script&gt;&lt;! endif --&gt;&lt;style type="text/css"&gt;body {font: 1em/150% Arial, Helvetica, sans-serif;}a {color: 669;text-decoration: none;}a:hover {text-decoration: underline;}h1 {font: bold 36px/100% Arial, Helvetica, sans-serif;}/ STRUCTURE / pagewrap {padding: 5px;width: 960px;margin: 20px auto;} header {height: 180px;} content {width: 600px;float: left;} sidebar {width: 300px;float: right;} footer {clear: both;}/ MEDIA QUERIES // for 980px or less /@media screen and max-width: 980px { pagewrap {width: 94%;} content {width: 65%;} sidebar {width: 30%;}}/ for 700px or less /@media screen and max-width: 700px { content {width: auto;float: none;} sidebar {width: auto;float: none;}}/ for 480px or less /@media screen and max-width: 480px { header {height: auto;}h1 {font-size: 24px;} sidebar {display: none;}}/ border &amp; guideline you can ignore these / content {background: f8f8f8;} sidebar {background: f0efef;} header, content, sidebar {margin-bottom: 5px;} pagewrap, header, content, sidebar, footer {border: solid 1px ccc;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="pagewrap"&gt;&lt;div id="header"&gt;&lt;h1&gt;Header&lt;/h1&gt;&lt;p&gt;Tutorial by &lt;a href="http://webdesignerwall.com"&gt;Web Designer Wall&lt;/a&gt; read &lt;a href="http://webdesignerwall.com/tutorials/responsive-design-in-3-steps"&gt;related article&lt;/a&gt; &lt;/p&gt;&lt;/div&gt;&lt;div id="content"&gt;&lt;h2&gt;Content&lt;/h2&gt;&lt;p&gt;text&lt;/p&gt;&lt;p&gt;text&lt;/p&gt;&lt;p&gt;text&lt;/p&gt;&lt;p&gt;text&lt;/p&gt;&lt;p&gt;text&lt;/p&gt;&lt;p&gt;text&lt;/p&gt;&lt;p&gt;text&lt;/p&gt;&lt;p&gt;text&lt;/p&gt;&lt;p&gt;text&lt;/p&gt;&lt;p&gt;text&lt;/p&gt;&lt;/div&gt;&lt;div id="sidebar"&gt;&lt;h3&gt;Sidebar&lt;/h3&gt;&lt;p&gt;textg&lt;/p&gt;&lt;p&gt;fgs&lt;/p&gt;&lt;p&gt;fgsg&lt;/p&gt;&lt;p&gt;dg&lt;/p&gt;&lt;p&gt;dfgfd&lt;/p&gt;&lt;p&gt;是否感到反感&lt;/p&gt;&lt;p&gt;sgrtg&lt;/p&gt;&lt;p&gt;分公司&lt;/p&gt;&lt;p&gt;sgf&lt;/p&gt;&lt;p&gt;text&lt;/p&gt;&lt;/div&gt;&lt;div id="footer"&gt;&lt;h4&gt;Footer&lt;/h4&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt; 不用高亮插件展示： &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;!-- viewport meta to reset iPhone inital scale --&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;title&gt;Demo: Responsive Design in 3 Steps&lt;/title&gt; &lt;!-- css3-mediaqueries.js for IE8 or older --&gt; &lt;!-- if lt IE 9 &gt; &lt;script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js…