响应式网页设计三步走
第一步. Meta 标签 (查看 demo)
为了适应屏幕，多数的移动浏览器会把HTML网页缩放到设备屏幕的宽度。你可以使用meta标签的viewport属性来设置。下面的代码告诉浏览器使用设备屏幕宽度作为内容的宽度，并且忽视初始的宽度设置。这段代码写在 <head>里面
1. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
IE8及以下的浏览器不支持media query。你可以使用media-queries.js 或 respond.js 。这样IE就能支持media query了。
1. <!--[if lt IE 9]>   
2.     <script src="lecode/svn/trunk/css3-mediaqueries.js"></script>   
3. <![endif]--> 
第二步. HTML 结构
这个例子里面，有header、content、sidebar和footer等基本的网页布局。 header 有固定的高180px，content 容器的宽是600px，sidebar的宽是300px。
第三步. Media QueriesCSS3 media query
 响应式网页设计的关键。它像一个if语句，告诉浏览器如何根据特定的屏幕宽口来加载网页。
如果屏幕窗口小于980px，下面的规则就生效。在这里，我设置了容器的宽度为百分比的形式而不是像素单位，这样会更加灵活。
如果屏幕窗口小于700px， 定义 #content 和 #sidebar 为自适应宽度，并移除它的浮动属性，这样它会全屏显示。
如果屏幕窗口小于480px (移动设备的屏幕)， 设置#header 高为自适应，把h1字体设置为24px，并且隐藏#sidebar。
这些media query，你可以写很多。在这个demo，我只写了三个。media query的目的是应用不同的CSS规则来实现屏幕的最佳布局。它可以写在同一个CSS文件，也可以写在不同的文件。
通过CSS3 Media Query实现响应式Web设计
概述
我们将范例页面的父级容器宽度设置为固定的980px，对于桌面浏览环境，该宽度适用于任何宽于1024像素的分辨率。我们通过media query来监测那些宽度小于980px的设备分辨率，并将页面的宽度设置由“固定”方式改为“液态”，布局元素的宽度随着浏览器窗口的尺寸变化进行调整。当可视部分的宽度进一步减小到650px以下时，主要内容部分的容器宽度会增大至全屏，而侧边栏将被置于主内容部分的下方，整个页面变为单栏布局。
HTML代码
我们将把注意力集中在页面的主要布局方面，并使用HTML5标签来更加语义化的实现这些
结构，包括页头、主要内容部分、侧边栏和页脚：
1. <div id="pagewrap"> 
2.    
3.     <header id="header"> 
4.         <hgroup> 
5.             <h1 id="site-logo">Demo</h1> 
6.             html网页设计实验总结<h2 id="site-description">Site Description</h2> 
7.         </hgroup> 
8.         <nav> 
9.             <ul id="main-nav"> 
10.                 <li><a href="#">Home</a></li> 
11.             </ul> 
12.         </nav> 
13.         <form id="searchform"> 
14.             <input type="search"> 
15.         </form> 
16.     </header> 

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。