響應式設計-媒體查詢，響應媒體查詢

響應式設計-媒體查詢，響應媒體查詢

媒體查詢

媒體查詢只支援IE9+、chrome、ff等瀏覽器，IE8以下的瀏覽器可以下載引用respond.js，

寫法：

<!--[if lt IE 9]>
　　　　<script src="respond.js"></script>
<![endif]-->

媒體查詢能檢測哪些屬性 ：
    1.width  視口寬度
    2.height 視口高度
    3.device-width 渲染表面的寬度（對我們來說就是裝置螢幕的寬度）
    4.device-height   渲染表面的高度（對我們來說就是裝置螢幕的高度）
    5.orientation  檢查裝置處於橫向還是縱向
    6.aspect-ration 基於視口寬度和高度的寬高比
        一個16:9比例的顯示屏可以這樣定義：aspect-ration:16/9;
    7.device-aspect-ration 基於裝置渲染平面的寬高比
    8.color 每種顏色的位元  例如 min-color:16 會檢查裝置是否擁有16位顏色
    9.color-index 裝置色彩索引表中的顏色數。值必須是非負整數
    10.monochrome 檢查單色框架緩衝區中每像素所使用的位元 ， 值必須是非負整數
    11.resolution 用來檢測螢幕或印表機的解析度，例如：min-resolution:300dpi,
        還可以接受每厘米像素點數的度量值，例如，min-resolution:118dpcm;
    12.scan 電視機的掃描方式
        progressive 漸進式掃描
        interlace 隔行掃描
        例如：720p HD電視（p表示漸進式掃描）匹配 scan:progressive
        1080i HD電視（i表示隔行掃描）匹配 scan:interlace
    13.grid 用來檢測輸出裝置是網路裝置還是位元影像裝置

    1-11可以有min- 、max- 建立一個查詢範圍，而12-13沒有

寫法：

　　1、link上面media屬性判斷，是否載入改css

　　eg：<link rel="stylesheet" type="text/css" media="screen and orientation:portrait" href="css/sreen_style.css" />

        　　orientation:portrait 意思是顯示屏是縱放的，yes，載入改css
        　　not 在媒體查詢的開頭加上會顛倒改查詢的邏輯
        　　and 是並||
        　　， 或
　　2、css檔案外鏈css檔案

　　　　　@import url("phone.css") screen and (max-width:360px); /*當顯示屏最大寬度小於360px時載入  */
　　3、直接書寫：

　　　　@media screen and (max-width:980px) {
   　　　　　　body{
       　　　　　　background:#f0f;
      　　　　 　　font-size:12px;
   　　　　　　}
　　　　　}

 
做響應式web 頁面怎設計

響應式Web設計的方法
介紹完響應式Web的背景和概念之後，是時候該介紹具體的實現方法了，其實響應式Web設計的方法很簡單，就是利用CSS3的媒體查詢Media Queries和Viewport來解決問題的。
首先我們一起來看看Media Queries，這裡我只會對其做一個簡單的列舉介紹。
通過媒體查詢的設定，我們可以根據螢幕寬度、螢幕方向等各個屬性來載入不同情境下不同的CSS檔案來渲染頁面的視覺風格。具體的使用方法有以下兩種：
1、通過link標籤：
<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1.css" />

範例程式碼代表噹噹前螢幕寬度小於479px的時候，載入testcssbywidth1.css檔案來渲染頁面。
2、CSS中直接設定：
@media screen and (max-width:479px) {
　　/* 具體的CSS屬性設定 */
　　}
對於Media Queries的一些常用屬性，只對常用的幾個做一個簡單列舉說明，其他的屬性請各位自行查閱相關資料：
width：描述終端裝置顯示地區的寬度，接受max/min的首碼；
height：描述終端裝置顯示地區的高度，接受max/min的首碼；
device-width：描述終端裝置螢幕的寬度，接受max/min的首碼；
device-height：描述終端裝置螢幕的高度，接受max/min的首碼；
orientation：描述終端裝置處於橫屏還是豎屏的狀態，取值分別為：landscape/portrait。
當我們調整瀏覽器大小的時候，上面通過媒體查詢屬性的操作就可以完成響應式Web設計的工作，但是這卻不能滿足移動終端的瀏覽器，因為行動瀏覽器預設頁面是為寬螢幕設計的，所以會把他縮小來適應小螢幕，但是終端裝置卻無法識別正確的寬度，所以光靠媒體查詢是解決不了移動終端裝置的響應式Web設計的
 
做1個響應式設計網站好？

第1步：Meta標籤（查看示範）大多數移動閱讀器將HTML頁面放大為寬的視圖（viewport）以符合螢幕解析度。你可使用視圖的meta標籤來進行重設。下面的視表徵圖簽告知閱讀器，使用裝備的寬度作為視圖寬度並制止初始的縮放。在head標籤裡加入這個meta標籤。第2步：HTML結構在這個例子裡，我有1個包括頭部、內容、側邊欄和頁尾的基本頁面布局。頭部有固定的高度180像素，內容容器是600像素而側邊欄是300像素。第3步：媒介查詢-Media QueriesCSS3 Media Query-媒介查詢是響應式設計的核心。它根據條件告知閱讀器如作甚指定視圖寬度渲染頁面。當視圖寬度為小於等於980像素時，以下規則將會生效。基本上，我會將所有的容器寬度從像素值設定為百分比以使得容器大小自適應。需要響應式網站設計，就到1品威客網發布徵集任務，百萬專業威客網給您最好的設計服務。 查看原帖>>

記得採納啊