前言：隨著人們對手機、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覆蓋，導致無法生效，所以建議將其放在末尾