標籤：
媒體查詢可以根據裝置顯示器特性設定CSS樣式。
媒體查詢文法：
1、寫在樣式裡:
@media 條件
@media screen and (max-width: 550px){/*樣式*/ }
2、寫在link標籤裡
<link rel="stylesheet" media="screen and (max-width:550px)" href="media.css"/>
媒體查詢常用的是檢測視口寬度（width）和螢幕寬度（device-width）。
試一下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>媒體查詢</title> <style> body{ background-color: grey; } /*視窗< 960px*/ @media screen and (max-width: 960px){ body{ background: red; } } /*視窗< 768px*/ @media screen and (max-width: 768px) { body{ background:orange; } } /*視窗< 550px*/ @media screen and (max-width: 550px){ body{ background:yellow; } } /*視窗< 320px*/ @media screen and (max-width: 320px){ body{ background: green; } } </style></head><body> 改變瀏覽器視窗寬度，背景顏色會根據當前視口尺寸發生改變。</body></html>
響應式布局之媒體查詢
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
