瀏覽器分辨率自適應之CSS媒體查詢Media詳解

SS媒體查詢允許我們基于瀏覽網站的設備的特性來應用不同的樣式申明，最常用的特性是視口寬度。通過查詢視口寬度，我們可以實現如下功能：站點默認為兩列式布局，如果屏幕（適口）寬度超過40em，則變成三列式布局。

1、媒體查詢操作方式

實際操作為：對設備提出詢問（稱作表達式）開始，如果表達式結果為真，媒體查詢中的CSS被應用，如果表達式結果為假，媒體查詢內的CSS將被忽略。

2、媒體查詢結構

@media only screen and (min-width:40em) { 
  body { background-color:blue;} 
}

2.1 @media

以@media開頭來表示這是一條媒體查詢語句。

2.2 screen

緊跟在@media后面的是一個或者多個表達式，可以判別為真或假。在創建媒體查詢時，必須以媒體類型（此處為screen）作為第一個表達式：@media only screen。與媒體類型相對應的有：print（打印機）、braille（盲文）或者all（全部）等其他類型。

2.3 and

and是一個關鍵字，表示有多個表達式，screen是第一個表達式，and后為另一個表達式。需前后表達式都為真時，整條查詢結果才為真（也就是“且”的意思）。與and相對應的關鍵字有：or、not等。

2.4 (min-width:40em)

and之后的(min-width:40em)為第二個表達式（表達式在小括號內），所有的表達式都應包含在括號內，除非它是只有一個單詞的媒體類型表達式（如：screen、print等）。

前綴min-表示“至少”，即“大于等于”的意思。

前綴max-表示“至多”，即“小于等于”的意思。

2.5 ｛｝

花括號里面的內容表示整條媒體查詢結果為真時的CSS 樣式。

在使用媒體查詢時，不要把所有樣式都放入媒體查詢中。正確做法是先聲明適用于所有視口寬度的非媒體查詢樣式，然后只是用媒體查詢去覆蓋掉在特定寬度中用到的樣式。

body { background-color:green; } 
@media only screen and (min-width:40em) { 
  body {background-color:blue;} 
}

3、在樣式表鏈接中使用媒體查詢

4、媒體特性

媒體查詢可以查詢許多媒體特性，如：視口寬度和高度、屏幕寬度和高度、方向、寬高比和分辨率（屏幕上每個維度上的像素個數）等。

其中大多數都可以加上min-或max-前綴。

4.1 視口寬度和高度（媒體查詢中最常用到的設備屬性）

視口寬度：width
視口高度：height

視口指的是瀏覽器窗口中實際包含網頁的那部分區域。瀏覽器窗口減去頁面邊上的滾動條，以及頂部或底部的工具欄和菜單，剩下的區域就是視口。

4.2 屏幕寬度與高度

屏幕寬度：device-width
屏幕高度：device-height

@media only screen and (max-device-width:40em) {...}

4.3 方向

方向：orientation

值為：橫排方向（landscape）豎排方向（portrait）

@media only screen and (orientation:landscape) {...}

4.4 寬高比

視口寬高比：aspect-ratio
設備屏幕寬高比：device-aspect-ratio

常見的顯示器寬高比時16:9（如19201080或1366768像素）或者是16:10（1280800）。iphone 3和iphone 4s是3:2（480320和960640），而iPhone 5則是16:9（1136640）。安卓手機通常是4:3、3:2、16:10或16:9。

@media only screen and (min-device-aspect-ratio:16/9) {...}

4.5 分辨率

設備屏幕的分辨率：resolution

@media only screen and (resolution:3oodpi) {...}

4.6其他媒體特性

color
color-index
monochrome
scan
grid

5、瀏覽器支持

需要擔心的瀏覽器是IE8及其更早版本。

當需要在IE8及其更早版本中使用媒體查詢時，我們可以使用條件注釋使代碼僅針對Internet Explorer。

條件注釋也是一種查詢，出現在HTML 中，而不是CSS中。

為了讓網站能在老版的IE中正確顯示，需要使用polyfill或利刃shive腳本。我們所要做的就是下載這個文件，然后在<head>元素中鏈接他，如：

前2篇文章講了《為什么375×667是移動端原型設計的最佳分辨率如何設置手機APP原型尺寸

所謂的APP原型適配手機，是指用手機瀏打開原型頁面的時候，橫豎都剛好撐滿屏幕。當然如果頁面比較長，高度超過一屏是沒問題的。

如果你的原型是你手機屏幕的邏輯分辨率

比如你的原型是375×667，手機是iPhone6/6s/7，那在手機上查看的時候無需縮放，默認撐滿屏幕。

如果你的原型是360×640，而手機是Android的小米4、小米note、華為p7、p8榮耀6、7這些主流機型，也是一樣的。

如果你的原型不是你手機屏幕的邏輯分辨率

比如你的原型是375×667,而你的手機是華為p8，1080×1920。理論上來說無法完美適配APP中所有的頁面。但是除了有下導航的頁面一般都沒問題。

設置生成原型的手機參數

你需要在Axure生成HTML的時候設置一下手機上如何展示原型。

請勾選包含視口標簽。瀏覽器顯示網頁，默認是按照網頁自身分辨率來展示的。勾選了此項之后，里面的區域按照下方規則來處理展示。

寬，使用默認的device-width即可。

高，一般不需要填，因為是根據寬度來決定的。

最小縮放倍數和最大縮放倍數，一般不需要填。

允許用戶縮放，一般填寫no。

初始縮放倍數怎么填

具體規則是原型頁面的橫向分辨率x初始縮放倍數xDPR參數=手機屏幕的橫向分辨率。得出這個值填到上圖中的對應位置。

而這里的DPR參數(devicePixelRatio)，代表的是設備像素和CSS像素的比例，下方的chrome網頁調試中也揭示了這一點。

所以上面的華為p8應該設置為0.96，你可以根據機型去百度搜索對應的DPR參數是多少。

查看原型

在電腦上看

通過chrome-視圖-開發者-開發者工具，切換到你想看的手機尺寸。同時也可以用這個工具去了解在其他機型上面的效果，以方面了解是不是需要單獨適配。

當然safari的菜單欄-開發-響應者模式也可以。

在手機上看

請用手機瀏覽器打開該網頁，請用手機瀏覽器打開該網頁，最好生成到桌面查看效果。比如我設計的原型。

建議豎向減掉20px，因為Axure默認不顯示頂部狀態欄。

總結

建議你們下次設計APP原型的時候按照通用分辨率375×667來設置，次選方法是按照自己手機的邏輯分辨率來定尺寸。。

如果想明白為什么要這樣設置，可以去搜索viewport和邏輯分辨率等概念。當然就使用而言，PM無需了解這些知識。

至于如何把原型放到手機上面查看，我們下次再講。

SS 媒體查詢是一種功能強大的技術手段，它可以根據不同的設備屬性（例如視口寬度、屏幕比例、設備方向等）來應用不同的樣式。這種技術在構建響應式和自適應設計方面具有巨大的優勢，它能夠確保您的網站在各種類型的設備上都呈現出良好的視覺效果。

基本語法

媒體查詢的基本語法如下：

@media not|only mediatype and (expressions) {
  CSS-Code;
}

not：表示不匹配指定的媒體類型。
only：表示只匹配指定的媒體類型，這可以避免老舊瀏覽器執行不必要的樣式表下載。
mediatype：指的是媒體類型，如 screen、print 等。
expressions：是一系列的媒體特性表達式，用來定義媒體查詢的具體條件。

示例

一個簡單的媒體查詢示例：

/* 默認樣式 */
body {
  background-color: lightblue;
}

/* 當視口寬度小于600px時，改變背景顏色 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

常見的媒體特性

一些常用的媒體特性包括：

width：視口的寬度。
height：視口的高度。
orientation：設備的方向（portrait 或 landscape）。
aspect-ratio：視口的寬高比。
device-pixel-ratio：設備的像素比率。
hover：設備是否支持懸停操作。
pointer：設備的指針精度。

我們可以針對手機、平板和電腦屏幕進行適配。

手機 - 通常屏幕寬度在 320px 到 480px 之間。
平板 - 屏幕寬度一般在 600px 到 1024px 之間。
電腦 - 屏幕寬度通常大于 1024px。

下面是針對這些設備的一個簡單響應式布局示例。我們將使用一個簡單的兩欄布局，其中包含一個主要內容區域和一個側邊欄。側邊欄在手機屏幕上會被隱藏，在平板屏幕上會顯示為下方的內容塊，在電腦屏幕上則會顯示為右側的側邊欄。

HTML 結構

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Layout Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Responsive Design Example</h1>
  </header>
  <div class="container">
    <main>
      <article>
        <h2>Main Content</h2>
        <p>This is the main content area. It will always be visible regardless of the device.</p>
      </article>
    </main>
    <aside>
      <h2>Sidebar</h2>
      <p>This is the sidebar with additional information. Its visibility and position will change based on the device type.</p>
    </aside>
  </div>
  <footer>
    <p>Footer Content</p>
  </footer>
</body>
</html>

CSS 樣式

/* 全局樣式 */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #f4f4f4;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

header, footer {
  background: #555;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

header h1, footer p {
  margin: 0;
}

main, aside {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
}

/* 手機屏幕 */
@media (max-width: 480px) {
  aside {
    display: none; /* 隱藏側邊欄 */
  }
}

/* 平板屏幕 */
@media (min-width: 481px) and (max-width: 1024px) {
  aside {
    display: block; /* 顯示側邊欄 */
    width: 100%; /* 側邊欄占據全寬 */
    margin-top: 20px; /* 添加頂部間距 */
  }
}

/* 電腦屏幕 */
@media (min-width: 1025px) {
  .container {
    display: flex;
    justify-content: space-between;
  }

  main {
    flex: 2; /* 主要內容占據2/3的寬度 */
  }

  aside {
    flex: 1; /* 側邊欄占據1/3的寬度 */
  }
}

解釋

全局樣式：設置基本的字體、顏色、間距等。
手機屏幕：當屏幕寬度小于或等于 480px 時，側邊欄將被隱藏。
平板屏幕：當屏幕寬度介于 481px 和 1024px 之間時，側邊欄將顯示，并占據整個寬度，位于主要內容下方。
電腦屏幕：當屏幕寬度大于 1024px 時，主內容區和側邊欄將并排顯示，主內容區占據2/3的寬度，側邊欄占據1/3的寬度。

在線咨詢

上一篇：小程序，跳轉頁面的兩種方式及其頁面傳參數
下一篇：golang html/template模塊

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商