自适应HTML页面源码

来源：互联网发布：仙逆和凡人知乎编辑：程序博客网时间：2024/06/06 03:20

之前做一个简单的界面，需要自适应界面大小，下面是网上找的一个demo，不需要任何依赖文件就能跑的。

<!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>text</p><p>text</p></div><div id="footer"><h4>Footer</h4></div></div></body></html>

附上原网页：http://xinyo.org/archives/62104/

阅读全文

1 0