<kbd id='64ke8glo'></kbd><address id='64ke8glo'><style id='64ke8glo'></style></address><button id='64ke8glo'></button>

          银河娱乐网址

          爲什麼響應式設計需要媒體查詢

          日期:2016/8/5 / 人氣:

          如果沒有CSS3的媒體查詢模塊 ,則無法爲設備屬性(如視口寬度)設置特定的CSS樣式 。

          如果仔細查看CSS3媒體查詢模塊的W3C規範 ,您將看到媒體查詢的官方解釋:HTML4和CSS2目前支持爲不同媒體類型設置專有樣式表 。

          例如 ,頁面在屏幕上顯示時使用無襯線字體 ,打印時使用襯線字體 。屏幕和打印是兩種已定義的媒體類型 。

          媒體查詢使樣式表更具針對性 ,並擴展了媒體類型的功能 。媒體查詢由媒體類型和一個或多個檢測媒體特徵的條件表達式組成 。可用於媒體查詢中的檢測的媒體特徵是寬度 ,高度和顏色(等) 。使用媒體查詢 ,您可以自定義特定輸出設備的顯示 ,而無需更改頁面內容 。

          媒體查詢語法

          26第2章媒體查詢:支持不同的視口

          您還可以在CSS樣式表中使用媒體查詢 。例如 ,將以下代碼插入樣式表 。在屏幕寬度爲400像素或更小的設備上 ,h1元素的文本顏色將變爲綠色 。 TR @mediascreenand(max-device-width: 400px){
          H1 {color: green}
          }
          您還可以使用CSS的@import指令在當前樣式表中有條件地引入其他樣式表 。例如 ,以下代碼爲最大視口寬度爲360像素的顯示設備加載名爲phone.css的樣式表 。 TR @importurl(“phone.css”)screenand(max-width: 360px);
          請記住 ,使用CSS的@import方法會增加HTTP請求(這將影響加載速度) ,因此請謹慎使用此方法 。

          2.2爲什麼響應式設計需要媒體查詢25

          在現代瀏覽器中瀏覽網頁(如果是IE ,至少是IE9)並不斷調整瀏覽器窗口寬度 。頁面的背景顏色根據當前視口大小而變化 。爲了清楚起見 ,我在這裏使用顏色名稱 ,但實際上最好使用像#ffffff這樣的十六進制顏色值 。接下來 ,讓我們繼續分析媒體查詢 ,並學習如何充分利用它們 。如果您經常使用CSS2樣式表 ,您就知道可以通過&lt; link&gt;的媒體屬性爲樣式表指定設備類型(例如顯示器或打印機) 。標籤 。具體而言 ,在&lt; head&gt;中插入一個 。 HTML頁面的標記 。 一個鏈接標記 ,如以下代碼段所示:
          &LT; linkrel=”樣式表”類型=”文本/CSS”媒體=”屏幕” HREF=”屏幕styles.css的”&GT;
          媒體查詢允許我們根據設備的各種功能設置適當的樣式 ,而不僅僅是設備類型 。將媒體查詢視爲瀏覽器的問題 。如果瀏覽器回答“是” ,則應用樣式;如果答案爲“否” ,則不應用任何樣式 。相比CSS2只能詢問瀏覽器“你是一個顯示器嗎 ?” ,媒體查詢可以提出更多問題 。例如 ,媒體查詢可以詢問:“您是垂直展示位置 。” 顯示 ? “看看相應的實際代碼:
          &lt; linkrel=“stylesheet”media=“screenand(orientation: portrait)”href=“portrait-screen.css”/&gt;
          首先 ,媒體查詢表達式詢問媒體類型(您是顯示器嗎 ?)然後詢問媒體特徵(顯示器是垂直放置的嗎 ?) 。垂直放置的任何縱向設備都將加載portrait-screen.css樣式表 ,其他設備將忽略該樣式表 。在媒體查詢的開頭附加一個不會反轉查詢的邏輯 。 TR例如 ,以下代碼反轉上一示例中的效果 ,導致非肖像顯示設備加載樣式文件:
          &lt; linkrel=“stylesheet”media=“notscreenand(orientation: portrait)”href=“portrait-screen.css”/&gt;
          您還可以將多個表達式組合在一起 。例如 ,讓我們展開上一個示例 ,以限制僅在視口寬度大於800像素的顯示設備上加載文件的能力 。 TR &lt; linkrel=“stylesheet”media=“screenand(orientation: portrait)和(min-width: 800px)”href=“800wide-portrait-screen.css”/&gt;
          此外 ,您還可以編寫媒體查詢列表 。如果查詢列表中的任何查詢爲true ,則加載該文件 。 TR 所有查詢都不正確 ,因此不會加載它們 。例子如下:
          &lt; linkrel=“stylesheet”media=“screenand(orientation: portrait)和(min-width:) 800像素) ,投影的“href=” 800wide畫像-screen.css” /&GT;
          這裏有兩點需要注意 。首先 ,媒體查詢以逗號分隔 。其次 ,您會注意到在投影之後 ,沒有 ,並且沒有特徵/值的組合 。沒有後續表達 ,這意味着只要是投影就滿足條件 。在這種情況下 ,樣式將應用於所有投影儀 。 TR 與以前的CSS規則一樣 ,基於媒體的查詢也可以有條件地加載樣式 。在上面的示例中 ,我們在將CSS文件鏈接到&lt; head&gt;&lt;/head&gt;時使用了媒體查詢 。頁面上的標籤 。除此之外 ,我們是CSS媒體查詢是什麼樣的 ,更重要的是 ,它是如何工作的 ? TR 將以下代碼插入任何CSS文件的末尾並預覽與之關聯的網頁:
          車身{
          背景顏色:灰色;
          }
          @mediascreenand(最大寬度: 960px){
          車身{
          背景顏色:紅色;
          }
          }
          @mediascreenand(最大寬度: 768px){
          車身{
          背景顏色:橙色;
          }
          }
          @mediascreenand(最大寬度: 550px){
          車身{
          背景顏色:黃色;
          }
          }
          @mediascreenand(max-width: 320px){
          車身{
          背景顏色:綠色;
          }
          }

          作者:技術圈朋友


          银河娱乐网址