移動端頁面（響應式）

1、媒體查詢

@media (min-width:xxx) and (max-width:yyy){ }

2、放在css文件裏，文件已下載，但在滿足條件後才生效。

3、實例

手機端要加一個 meta

<meta name="viewport" content="width_=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

因為手機端，默認模擬980px。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>nav</title> <meta name="viewport" content="width_=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <style> *{ margin: 0; padding: 0; } a{ text-decoration: none; color: inherit; } header{ padding: 10px; position: relative; } .nav2{ display: none; } @media (min-width: 451px) { header button { /* 一定要寫上 header，不寫選擇不到，有bug*/ display: none; } header .nav, header .nav.active{ /* ,後面的 header 也要寫，不寫選擇不到，有bug*/ display: none; } header .nav2 { display: flex; margin: 10px auto; } header { display: flex; align-items: center; } .nav2 > li { margin: 20px; } } button{ display: block; position: absolute; top: 40px; right: 40px; width: 80px; height: 50px; font-size: large; } ul,li{ list-style: none; } .logo{ width: 90px; height: 90px; background-color: grey; border-radius: 50%; } .nav{ display: none; background-color: grey; margin-top: 10px; } .nav.active{ display: flex; justify-content: space-between; font-size: large; } </style></head><body><header> <div class="logo"></div> <button id="xx">菜單</button> <ul id="yy" class="nav"> <li><a href="#">導航1</a></li> <li><a href="#">導航2</a></li> <li><a href="#">導航3</a></li> <li><a href="#">導航4</a></li> <li><a href="#">導航5</a></li> </ul> <ul class="nav2"> <li><a href="#">導航1</a></li> <li><a href="#">導航2</a></li> <li><a href="#">導航3</a></li> <li><a href="#">導航4</a></li> <li><a href="#">導航5</a></li> </ul></header><script> xx.onclick = function(){ yy.classList.toggle(active) }</script></body></html>

4、手機端的交互方式不一樣