CSS3 @media 查詢 - 根據屏幕尺寸采用不同的展示效果

常用于移動端排版布局使用，響應式開發。

參考：

https://www.runoob.com/cssref/css3-pr-mediaquery.html

定義和使用

使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。

@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。

當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

CSS 語法

@media?mediatype?and|not|only?(media feature)?{
???CSS-Code;
}

你也可以針對不同的媒體使用不同?stylesheets?:

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

例子：

https://oss.getimg.net/demo/webpage/2019/05-27.html