分享一个自适应例子
代码是：
<!doctype html><html lang="en"><head><meta charset="utf-8"><!-- viewport meta to reset iPhone inital scale --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo: Responsive Design in 3 Steps</title><!-- css3-mediaqueries.js for IE8 or older --><!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]--><style type="text/css">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 & 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;}</style></head><body><div id="pagewrap"><div id="header"><h1>Header</h1><p>Tutorial by <a href="http://webdesignerwall.com">Web Designer Wall</a> (read <a href="http://webdesignerwall.com/tutorials/responsive-design-in-3-steps">related article</a>)</p></div><div id="content"><h2>Content</h2><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p></div><div id="sidebar"><h3>Sidebar</h3><p>textg</p><p>fgs</p><p>fgsg</p><p>dg</p><p>dfgfd</p><p>是否感到反感</p><p>sgrtg</p><p>分公司</p><p>sgf</p><p>text</p></div><div id="footer"><h4>Footer</h4></div></div></body></html>
不用高亮插件展示：
预览地址：http://nimaboke.qiniudn.com/a/1.html
换成1500*500浏览页面，请运行下面的代码
最新回复 (0)
自适应已经成为主题必备功能了，很多时候用手机看看别人的博文感觉不错的，像看小说一样