页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
body{ width:960px； } @media only screen and (min-width:758px) and (max-width:991px) { body{ width:700px; } } @media only screen and (max-width:700px) { body{ width:500px; } }
上面的style表示当媒体屏幕改变时，网页会选择不同的style元素。
该图片添加以下style元素：img{max-width:100%}，注意不要在图片上设置它的长和宽，在CSS中输入上面的样式即可自适应屏幕了。
<html> <head> <title>响应式网页设计</title> <style type="text/css"> #tt{ width:400px; height:400px; background:red; color:yellow; font-size:25px; text-align:center; } @media only screen and (min-width:701px) and (max-width:800px) { #tt{ width:300px; height:300px; background:blue; color:red; font-size:20px; text-align:center; } } @media only screen and (max-width:700px) { #tt{ width:200px; height:200px; background:yellow; color:blue; font-size:20px; text-align:center; } } </style> <head> <body> <div id="tt">响应式网页设计</div> </body> </html>
当浏览器的屏幕大小大于800px时，会执行的style代码是：
#tt{ width:400px; height:400px; background:red; color:yellow; font-size:25px; text-align:center; }
效果如下图所示：
当浏览器的屏幕大小大于700px，小于800px时，会执行的style代码是：
#tt{ width:300px; height:300px; background:blue; color:red; font-size:20px; text-align:center; }
效果如下图所示：
当浏览器的屏幕大小小于700px时，会执行的style代码是：
#tt{ width:200px; height:200px; background:yellow; color:blue; font-size:20px; text-align:center; }
效果如下图所示：
