在一些簡單的站，我們通常採用響應式讓網站相容各類螢幕大小，這裡主要介紹下media ， 通過media來實現不同螢幕大小下使用不同樣式處理。
首先我們需要引入 Viewport 屬性，為了確保適當的繪製和觸屏縮放，需要在 head標籤中添加 viewport 中繼資料標籤
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">viewqport 是我們手機上的虛擬視窗、視覺視窗、顯示地區，他的作用就是建立一個虛擬視窗，meta 標籤的viewport屬性是在行動裝置上設定原始大小顯示和是否縮放的聲明，可以使用的參數設定如下:width：控制 viewport 的大小，可以指定的一個值，如果 600，或者特殊的值，如 device-width 為裝置的寬度（單位為縮放為 100% 時的 CSS 的像素）。 height：和 width 相對應，指定高度。 initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。 maximum-scale：允許使用者縮放到的最大比例。 minimum-scale：允許使用者縮放到的最小比例。 user-scalable：使用者是否可以手動縮放
示範代碼如下：
<!doctype html><html> <head> <!-- 加入這行代碼--> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> </body></html>
將Viewport引入頁面，下面我們就來介紹下media query
Media Query寫法如下:
@media screen and (max-width:989px){ /* 這裡面寫當螢幕寬度 width <=989px 所使用的樣式 */}/* 上面的方式可以縮寫如下(screen不寫,也是預設的是螢幕) */@media (max-width:989px){ /* 這裡面寫當螢幕寬度 width <=989px 所使用的樣式 */}/* 我們也可以寫多個條件來指定 *//* 下面表示當螢幕大於等於 768px 並且小於等於 1200px 所使用的樣式 */@media (min-width:768px) and (max-width:1200px) { /* 這裡面寫當螢幕寬度 ( 768px <= width <= 989px ) 所使用的樣式 */}<!-- 如果樣式太多,如要單獨寫到一個樣式檔案中，可以使用如下方式引入 --><!-- 下面表示，當螢幕寬度 width<=480px 引入該樣式檔案 demo.css --><link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="demo.css">
一般我們將螢幕分為如下幾種:
/* 超小螢幕 ( 手機，小於 768px ) */@media (max-width: 768px) { /* 這裡寫樣式檔案 */}/* 小螢幕 ( 平板，大於等於 768px ) */@media (min-width: 768px) { /* 這裡寫樣式檔案 */}/* 中等螢幕 ( 案頭顯示器，大於等於 992px ) */@media (min-width: @screen-md-min) { /* 這裡寫樣式檔案 */}/* 大螢幕 ( 大案頭顯示器，大於等於 1200px ) */@media (min-width: @screen-lg-min) { /* 這裡寫樣式檔案 */}
下面寫一個比較完整的案例，如下示範針對手機及平板分別進行了處理，
也可以在指定螢幕尺寸下將一些元素隱藏，這裡就沒有全部寫出來了，
大家可以根據自己的思路來實現，代碼如下：
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>demo</title> <!-- PC螢幕 這裡是引入外部樣式檔案的方式,這裡不用media判斷，預設就使用pc端樣式效果 pc.css --> <!-- <link rel="stylesheet" href="pc.css"> --> <!--手機螢幕 這裡是引入外部樣式檔案的方式, 這裡是當螢幕 width <= 760px 使用該樣式檔案 mobile.css --> <!-- <link rel="stylesheet" media="(max-width:760px)" href="mobile.css"> --> <!--ipad螢幕 這裡是引入外部樣式檔案的方式 這裡是當螢幕 768px <= width <= 1200px 使用該樣式檔案 ipad.css --> <!-- <link rel="stylesheet" media="(min-width:768px) and (max-width:1200px)" href="ipad.css">--> <!-- 如下是直接在樣式中寫入--> <style> /* 預設就是pc端效果 所以不需要通過media判斷 */ *{ font-family:微軟雅黑; margin:0px; padding:0px; } .main{ width:1300px; margin:0 auto; } .top{ height:100px; background: #272822; line-height: 100px; color:#fff; text-align: center; font-size:50px; font-weight: bold; } .left{ height:400px; background: #272822; line-height: 400px; color:#fff; text-align: center; font-size:50px; font-weight: bold; width:642px; float: left; } .right{ height:400px; background: #272822; line-height: 400px; color:#fff; text-align: center; font-size:50px; font-weight: bold; width:642px; float: right; } .bottom{ height:100px; background: #272822; line-height: 100px; color:#fff; text-align: center; font-size:50px; font-weight: bold; } .nav{ height:15px; clear:both; } /*手機螢幕 當螢幕 width <= 760px 指定如下樣式 */ @media (max-width:760px){ .main{ width:95%; } .top{ background: #faa; } .bottom{ background: #faa; } .left{ float:none; width:100%; height:100px; line-height: 100px; margin-bottom:15px; background: #faa; } .right{ float:none; width:100%; height:100px; line-height: 100px; background: #faa; } } /*平板螢幕 當螢幕 768px <= width <= 1200px 指定如下樣式 */ @media (min-width:768px) and (max-width:1200px){ .main{ width:95%; } .top{ background: #aaf; } .left{ float:none; width:100%; height:200px; line-height: 200px; margin-bottom:15px; background: #aaf; } .right{ float:none; width:100%; height:200px; line-height: 200px; background: #aaf; } .bottom{ background: #aaf; } } </style></head><body> <div class="main"> <div class="top">top</div> <div class="nav"></div> <div class="left">left</div> <div class="right">rigth</div> <div class="nav"></div> <div class="bottom">bottom</div> </div></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
