bootstrap_響應式佈局簡介_媒體查詢_媒體選擇器_2x3x圖

響應式佈局

• 在不一樣設備上，同一網頁根據設備特性（顯示屏大小，分辨率）呈現不一樣的佈局樣式。
• 思考： 
• 獲取設備相關信息
• 將屏幕劃分爲幾個區域
• 給須要變化的結構寫多套 css 樣式

媒體查詢

經常使用寫法

@media screen and (min-width: 768){}

 

• 核心內容

• #box {
      width: 200px;
      height: 200px;
      background-color: pink;
  }
  
  
  /* 媒體選擇器 */
  
  /* <= 768 */
  @media screen and (max-width: 768px){
      #box {
          background-color: red;    
      }
  }
  
  /* 768 < ? < 1024     768 顯示blue, 由於覆蓋操做 */
  @media screen and (min-width: 768px) and (max-width: 1024px){
      #box {
          background-color: blue;    
      }
  }

媒體選擇器 必須寫在正常樣式以後，避免被覆蓋

媒體查詢 是 css3 提出來的，須要處理 +only 舊版本兼容

@media only screen and (max-width: 768px){}

 

• 媒體操做符

取反 not

@media not screen and (width: 768px){ /* 不是 768 時的樣式 */ }

 

• 媒體類型
• all    全部媒體（默認值）
• screen    彩色屏幕
• print    打印預覽（注意： 不支持盒子的背景顏色）

• #box {
      width: 100px;
      height: 100px;
  }
  
  /* 打印模式下，出現邊框 */
  @media print and (min-width: 10px) {
      #box {
          border: 2px solid black;
      }
  }

• projection    手持設備
• tv                  電視
• braille             盲文觸覺設備
• embossed             盲文打印機
• speech            「聽覺」相似的媒體設備
• tty                 不適用像素的設備

 

 

• 媒體屬性
• width    瀏覽器窗口區域的寬度，會監控 resize
• height    瀏覽器窗口區域的高度，會監控 resize
• device-width

在 PC 端，就是 PC分辨率（不監控 resize）

在移動端，表示 獨立像素

• -webkit-device-pixel-ratio

像素比    可加 max min 前綴 兼容 2.1 2.2 之類的設備

• orientation: 

portrait       豎屏

landscape    橫屏

 

媒體選擇器

<link rel="stylesheet" type="text/css" href="./css/index.css" media="print">    /* css2 提出來的，在打印模式下采用的樣式 */

 

2x 圖 3x 圖

在保證不一樣設備完美顯示圖片的前提下，節約網絡帶寬

 

less 編寫媒體查詢

less → sass → stylus

面試題： css 預編譯語言 less 的優點

嵌套編程，層次感，結構鮮明

能夠定義變量，混合 maxin