媒体查询主要是对各种移动端设备的一个响应式兼容，可以在
@media only screen and (min-width: 屏幕宽度最小值) and (max-width: 屏幕宽度最大值){你所要兼容的模块}
中设置你想要的浏览器屏幕大小与浏览器中内容随浏览器的大小改变，来改变自己的整体布局。解决页面乱码问题。
但是我们在遇到不同的设备时我们也需要来设置不同的屏幕宽度，（注：屏幕的高度最好使用100%，这样你的网页在不同的设备上的高度都是满屏的，如果给了固定高度的话，可能出现尾部有空白）以下我来分享几种常见的移动端设备；
/*最大1200px显屏*/
@media screen and (max-width : 1200px) {}
/*最大800px显屏*/
@media screen and (max-width : 800px) {}
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) {}
/*最大640px显屏*/
@media screen and (max-width : 640px) {}
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) {
}
/*iPad横板显屏*/
@media screen and (max-device-width: 1024px) and (orientation: landscape) { }
/*iPad竖板显屏*/
@media screen and (max-device-width: 768px) and (orientation: portrait) { }
/*iPhone 和 Smartphones*/
@media screen and (min-device-width: 320px) and (min-device-width: 480px) { }
在媒体查询的里面注意我们一定不要设置绝对长度，否则你接下来可能会遇到浏览器缩小时出现页面不能跟着浏览器一起缩小的情况。
所以我们必须要了解当前的几种浏览器相对长度（rem、em），
1.em
在布局中是根据父元素的大小来改变大小的；
2.rem
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合（1em = 16px），我们在根元素上一般都会先设置一个大小（例如：font-size：12px），那么我们在计算时就要按照根元素的东西来计算，（例如：设置一个字体大小为16px的样式，{16/12=1.33rem}）
实例：
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta content="yes" name="apple-mobile-web-app-capable"> 6 <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"> 7 <meta content="telephone=no" name="format-detection"> 8 <title>title> 9 <style type="text/css"> 10 *{ 11 margin: 0; 12 padding: 0; 13 } 14 /*根元素*/html { 15 font-family:"微软雅黑"; 16 -ms-text-size-adjust: 100%; 17 -webkit-text-size-adjust: 100%; 18 font-size: 62.5%;/*根元素设置字体大小为10，计算（10/16*100%=62.5%）其中的16为浏览器默认的字体大小*/ 19 } 20 /*父元素*/ body { 21 font-size:1.4rem;/*父元素设置字体为14px，计算（14/10=1.4rem）*/ 22 -webkit-overflow-scrolling: touch; 23 } 24 div{ 25 float: left; 26 width:23%; 27 height: 100px; 28 margin: 0 1%; 29 } 30 #div1{ 31 background-color: #006699; 32 font-size: 3rem; 33 } 34 #div2{ 35 background-color: #ff6666; 36 font-size: 3em; 37 } 38 #div3{ 39 background-color: #ffff00; 40 font-size: 3rem; 41 } 42 #div4{ 43 background-color: #123456; 44 font-size: 3em; 45 } 46 @media only screen and (min-width: 601px) and (max-width: 980px) { 47 div{ 48 width: 48%; 49 margin: 0 1%; 50 } 51 } 52 @media only screen and (max-width: 600px) { 53 div{ 54 width: 96%; 55 margin: 0 2%; 56 } 57 } 58 style> 59 head> 60 <body> 61 <div id="div1">大大div> 62 <div id="div2">鹅鹅div> 63 <div id="div3">反反div> 64 <div id="div4">灌灌div> 65 body> 66 html>
当然在响应式布局中除了这些以外，我们值得注意的地方还有很多的，例如meta标签的设置上也有很多地方值得我们注意的，一般响应式布局上我们引入这个meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/> `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 - width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
- height：高度（数值 / device-height）（范围从223 到10,000）
- initial-scale：初始的缩放比例 （范围从>0 到10）
- minimum-scale：允许用户缩放到的最小比例
- maximum-scale：允许用户缩放到的最大比例
- user-scalable：用户是否可以手动缩 (no,yes)
- WebApp全屏模式：伪装app，离线应用
<meta name="apple-mobile-web-app-capable" content="yes" />- 隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
- 忽略数字自动识别为电话号码
<meta content="telephone=no" name="format-detection" /> - 忽略识别邮箱
<meta content="email=no" name="format-detection" /> - 添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner。
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
其他的一些meta标签使用方法