CSS——讓這些“展示”有更好的擴充套件性——媒體查詢

itsOli發表於2019-05-14
CSS套件
本文推薦 PC 端閱讀~

本文版權歸 “公眾號 | 前端一萬小時” 所有，未經授權，請勿轉載！
複製程式碼

獲取編號.png

css_15
複製程式碼

涉及面試題.png

1. 列舉你瞭解的 HTML5、CSS3 新特性？
2. Canvas 和 SVG 有什麼區別？
複製程式碼

前言： 實際上在很早之前，CSS 就支援媒體查詢了：例如，頁面有些部分需要在列印的時候隱藏或者變大，這時候可以使用 media 使某些 style 只在列印的時候生效。@media print {/* 適用於印刷的樣式 */}

而 CSS3 的 Media Queries 的到來，可以讓我們針對不同的裝置場景使用不同的 CSS。


1 常用的媒體型別

  • all（所有），適用於所有裝置。
  • handheld（手持），用於手持裝置。
  • print（印刷），用於分頁材料以及列印預覽模式下在螢幕上的文件檢視。
  • projection（投影），用於投影簡報，例如投影儀。
  • screen（螢幕） ，主要用於計算機螢幕。

在使用的時候可以在樣式表直接書寫 @media指令+空格+媒體型別（多個用逗號隔開）：

@media print {
   body { font-size: 10pt }
 }
 @media screen {
   body { font-size: 13px }parsing-errors
 }
 @media screen, print {
   body { line-height: 1.2 }
 }
複製程式碼

2 CSS3 裡的媒體查詢

CSS2 的媒體型別應用場景極為有限，CSS3 大大擴充了這一能力。

@media screen and (max-width: 990px) {
    .container{
        background: orange;
    }
}
/*?一般來說我們寫媒體查詢就用這句話就行了，這是最常用的。*/
/*意思就是：當我們的瀏覽器螢幕（screen）的最大寬度為990px 的時候，
以下的樣式生效。如果螢幕不是 ≤990px ，那麼以下樣式不生效。*/
複製程式碼

?另外，

@media (min-width: 700px) and (orientation: landscape) { ... }

/*?這個是指：
當它最小寬度是 700px ，並且它的 orientation 是 landscape（橫屏）。
orientation 這個屬性表示你的瀏覽器是橫屏(landscape)的還是豎屏（portrait）的，
比如說在手機上，瀏覽器分為橫屏和豎屏，那這樣的話，
萬一使用者的瀏覽器看著是橫屏的，那你可能給他一些提示。
比如你做了一些小遊戲，這個小遊戲不建議橫屏去玩，
但是使用者的瀏覽器自己可以去設定讓它去旋轉，那旋轉完成之後，東西都放不下了。
所以你可以給他一個提示，如果檢測到它是橫屏，你可以讓這段 CSS 生效，
那這段 css 可能就是一段隱藏的話，說“你瀏覽器要垂直起來去玩我們的遊戲”。
那這樣的話，我們不需要使用任何 JS 就可以實現這個效果了。
*/
複製程式碼

3 常用的 media 屬性

width：瀏覽器寬度
height：瀏覽器高度
device-width：裝置螢幕解析度的寬度值
device-height：裝置螢幕解析度的高度值
orientation：瀏覽器視窗的方向縱向還是橫向，當視窗的高度值大於等於寬度時該特性值為 portrait，否則為 landscape
aspect-ratio：比例值，瀏覽器的縱橫比
device-aspect-ratio：比例值，螢幕的縱橫比
color：裝置使用多少位的顏色值，如果不是彩色裝置，值為0
color-index：色彩表的色彩數
monochrome：單色幀緩衝器每個畫素的位元組
resolution：解析度值，裝置解析度值
scan：電視機型別裝置掃描方式，progressive 或 interlace
grid：只能指定兩個值 0 或 1，是否基於柵格的裝置
複製程式碼

4 如何引入 media

有兩種常用的引入方式：

4.1 link 方法引入

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">
複製程式碼

4.2 @media 引入（這個最常用）

@media screen and (min-width: 600px) and (max-width: 800px) {
    選擇器 {
        屬性：屬性值；
    }
}
複製程式碼

⚠️注意：一般我們都是寫完一個樣式之後，再寫它對應的媒體查詢，而且要注意選擇器的權重。


5 面試題例項

❓

css 媒體查詢.png

答：
?原始碼及效果展示
html

<div id="header"></div>

<div id="content">
  <div id="left-content"></div>
  <div id="right-content"></div>
</div>
複製程式碼

css

body{
  margin: 0;
}

#header{
  width: 100%;
  height: 200px;
  background-color: #33ccff;
}

#left-content{
  float: left;
  width: 100px;
  height: 1000px;
  background-color: #ffcc99;
}

#right-content{
  margin-left: 100px;
  width: 100%;
  height: 1000px;
  background-color: #823384;
}


/*?當螢幕 <= 700px 時，要及時覆蓋上面的樣式*/
@media (max-width: 700px) {

  #header{
    width: 100%;
    height: 50px;
    background-color: #33ccff;
  }

  #left-content{
    width: 0;
  }

  #right-content{
    width: 100%;
    margin-left: 0;
    background-color: #823384;
  }
}
複製程式碼

後記： 本篇知識點不多，但每個頁面又基本上都會用，所以理解的基礎上根據實際選擇即可。

加油！

相關文章