響應式設計：媒體查詢

時間 2019-12-17

標籤響應設計媒體查詢简体版

原文原文鏈接

　　媒體查詢可讓咱們根據設備顯示的特性爲其設定CSS樣式。能夠在不改變頁面內容的狀況下，爲特定的一些輸出設變指定顯示效果。css

1、媒體查詢語法web

　　一、<link>標籤：經過link標籤的media屬性爲樣式表指定設備類型，例如：chrome

　　如下代碼表示媒體類型是顯示屏，媒體特性爲顯示屏縱向放置，此時才引入css樣式　　瀏覽器

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="screen-style.css">

　　更進一步，還能夠寫一個媒體查詢列表。查詢列表中的任意一個查詢爲真，則加載文件。所有查詢都不爲真，則不加載。例子以下：表示只有顯示屏縱向放置，且視口大於800px或者爲投影儀時才引入css樣式ide

<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:800px), projection" href="800wide-portrait-screen.css" />

　　注：（1）媒體查詢之間使用逗號分隔佈局

　　　　（2）projection 以後，沒有and，也沒有任何特性/值的組合。沒有後續表達式，意味着只要是projection 就知足條件。本例中，樣式會應用於全部的投影儀。url

　　二、在CSS樣式表中使用媒體查詢：例如，將下面的代碼插入樣式表，在屏幕寬度《=400px的設備上，h1元素文字就會變綠色（最佳方式）spa

@media screen and (max-device-width : 400px) {h1 {color:green} }

　　三、使用CSS的@import指令：在當前樣式表中按條件引入其餘樣式表；例以下面代碼會給視口最大寬度爲360px的顯示屏加載一個名爲phone.css的樣式表設計

@import url ("phone.css") screen and(max-width : 360px);

　　注：使用@import方式會增長HTTP請求（會影響加載速度），應該謹慎使用。code

2、媒體查詢能檢測哪些特性

　　width/height：視口寬高；

　　device-width/height：設備屏幕的寬高；

　　orientation：檢查設備處於橫向仍是縱向；

　　device-aspect-ratio/aspect-ratio：基於設備/視口的寬高比；

　　color：每種顏色的位數。例如 min-color：16會檢測設備是否擁有16位顏色；

　　color-index：設備的顏色索引表中的顏色數。值必須是非負整數。

　　monochrome：檢測單色幀緩衝區中每像素所使用的位數。值必須是非負整數，如 monochrome: 2。

　　resolution：用來檢測屏幕或打印機的分辨率，如min-resolution: 300dpi。還能夠接受每釐米像素點數的度量值，如min-resolution: 118dpcm。

　　scan：電視機的掃描方式，值可設爲progressive（逐行掃描）或interlace（隔行掃描）

　　grid：用來檢測輸出設備是網格設備仍是位圖設備。

3、用媒體查詢改造咱們的設計

　　CSS層疊樣式表，即樣式表中後面的樣式會覆蓋前面相同的樣式（更高優先級除外），因此能夠利用媒體查詢重寫相應的部分

4、阻止移動瀏覽器自動調整頁面大小

　　iOS 和Android 瀏覽器都基於WebKit（http://www.webkit.org/）核心。這兩種瀏覽器以及不少其餘瀏覽器（如Opera Mobile），都支持用 viewport meta 元素覆蓋默認的畫布縮放設置。在HTML的<head>標籤中插入<meta>標籤，在<meta>中能夠設置具體寬度或縮放比例，例如，如下代碼是將一個頁面放大到設備實際尺寸兩倍顯示

<meta name="viewport" content="initial-scale=2.0, width=device width" />

通常，咱們須要將縮放比設置爲1.0，表示瀏覽器將按照視口的實際大小渲染頁面，同時，將寬度設置爲設備寬度表示瀏覽器都會按照設備實際大小來渲染頁面，以下

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

尤爲要注意的是content裏多個屬性的設置必定要用分號+空格來隔開，若是不規範將不會起做用。

5、小結

　　媒體查詢只能爲咱們提供自適應設計效果，不是徹底的響應式。能讓咱們的設計在媒體查詢設置的斷點之間靈動顯示的是流動佈局。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。