前言
頁面為了適應各種設備（PC端、移動端的不同設備）的不同顯示情況，增加了媒體查詢的功能，通過特定的要求達到不同的樣式顯示。
媒體查詢
@media 媒體類型 and|not|only (媒體特性)｛ /*css樣式*/ ｝ 或者
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
媒體類型
all
screen
媒體特性
媒體查詢通常用來區別於屏幕寬度大小——實際上區別不同設備的尺寸。而通常需要用到媒體查詢的時候（即適配移動端），會通過一些適配方案（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） */