前言

頁面為了適應各種裝置（PC端、移動端的不同裝置）的不同顯示情況，增加了媒體查詢的功能，通過特定的要求達到不同的樣式顯示。

媒體查詢

@media 媒體型別 and|not|only (媒體特性)｛
  /*css樣式*/
｝

或者

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

媒體型別

all

screen

print

媒體特性

媒體查詢通常用來區別於螢幕寬度大小——實際上區別不同裝置的尺寸。而通常需要用到媒體查詢的時候（即適配移動端），會通過一些適配方案（viewport、rem等）來確定尺寸比例。

東莞vi設計https://www.houdianzi.com/dgvi/ 豌豆資源網站大全https://55wd.com

常用媒體查詢方案

@media screen and (min-width:1200px){ ... }/* 大型裝置（大臺式電腦，1200px 起） */

@media screen and (min-width:992px){ ... }/* 中型裝置（臺式電腦，992px 起） */

@media screen and (min-width:768px) { ... } /* 小型裝置（平板電腦，768px 起） */

@media screen and (min-width:480px){ ... }/* 超小裝置（手機，小於 768px） */