在写响应式中页面中先加载：
//在网页的<head>中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度 <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> content属性值 : width:可视区域的宽度，值可为数字或关键词device-width height:同width intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别， maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。 user-scalable:是否可对页面进行缩放，no 禁止缩放 <!-- 移动设备支持@Begin --> <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type"> <meta content="no-cache,must-revalidate" http-equiv="Cache-Control"> <meta content="no-cache" http-equiv="pragma"> <meta content="0" http-equiv="expires"> <meta content="telephone=no, address=no" name="format-detection"> <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 苹果设备的全屏 --> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!--默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）--> <!-- 移动设备支持@end -->
<link rel="stylesheet" href="middle.css" media="screen and (min-width: 400px)">
/* CSS Code */
@media screen and (min-width: 600px) and (max-width:1200ox) { /* CSS Code */ }
@media screen and (max-width: 599px) { /* CSS Code */ }
CSS3中提供了多种媒体介质类型，虽然常用的就俩……注意媒体类型名称区分大小写，并且尽管有些介质类型有重合，但是一个平台只会有一种介质类型。（我猜这个标准很多浏览器不会遵守吧？）
all – 全部媒体类型
braille – 盲文触摸装置
embossed – 分页盲文打印机 （W3C的无障碍做的真细心……）
handheld – 小屏幕和流量有限的手持设备（注意！安装标准来说移动设备都应该使用这个介质类型，但是实际上安卓根本不理会这个介质，请使用 screen 结合媒体查询语句使用）
print – 提供给打印机的样式，最常用的介质类型，打印页面时获得适合阅读的效果
projection – 投影，给投影机使用（有人用？）
screen – 彩色屏幕，最常用的介质类型，一般和屏幕大小表达式联合使用
speech – 语音朗诵，用于屏幕阅读软件（和将来的Siri？）
tty – 固定间距字符网格，例如功能机那样的
tv – 智能电视设备（唔不知道我家的创维酷开支持如何……）
