@media与响应式布局

前言：随着人们对手机、iPad等的依赖，网页移动端也越来越受到重视，这就要求开发人员对响应式布局有一定的造诣，典型的移动端优先框架Bootstrap/Foundation等给开发者提供了快速建站的基础工具，在建站中宽度可以百分比指定，高度就比较难处理，我们可以使用@media媒体查询，给不同尺寸的设备指定不同的高度。
我以工作中的某个页面为例，通过media媒体查询实现响应式布局。

这是某个页面的应端模拟
当我写完这个页面后觉得还行，和PSD源文件相差无几，但是当我选择用iPad模拟时，发现页面就像被压扁了一样，难以接受。

于是考虑用媒体查询对不同尺寸的设备指定不同的高度，由于css代码比较繁琐就不全贴了，只贴上公共样式中和媒体查询先关的一部分

@media only screen and (min-height:1024px){
    .main-op{margin-top:30px;}
    .nav-w-50{height:100px;font-size:18px;}
    .nav-w-33{margin-top:10px;height:70px;line-height:70px;}
    .nav-w-50:hover{box-shadow:0px 10px #2dc3e8;}
}

**分析：**chrome 模拟iPad尺寸最小高度为1024px，我就以1024px为分界，写出媒体查询条件@media only screen and (min-height:1024px){#code}，然后把需要修改的样式装进去就行了，下面来看看效果

媒体查询的具体语法大致可以概括为：

@media and/not/only all/screen/print/speech and/not/only (min/max-width:230px){
    #code
}

**注意：**如果将@media放在文件中间，可能会被后面的css覆盖，导致无法生效，所以建议将其放在末尾

具体情况具体分析，菜鸟教程关于媒体查询详解：http://www.runoob.com/css/css-rwd-mediaqueries.html