金魚系列、RWD (下)

腦袋要清楚，手機寫了甚麼、桌機寫了甚麼。可以在最後，將手機與桌機不同的部分獨立出來，共同的部分共用，這樣效能會更好。

css 的寫法很靈活，不只一種。

先以手機為主。手機效能沒有桌機好，先讀取手機畫面，會較省事，桌機效能好、電力充足，不用擔心先讀取手機再讀取桌機被複寫的功能。會被複寫，就會有效能問題、耗電量問題。

選單要做的是漢堡，但在手機上不用出現選單，要出現的是那三根斜線，

html 部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>手機選單</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="test.css">
</head>
<body>
  <input type="checkbox" name="" id="menu_control">
  <div class="header">
    <h2 class="logo">
      <!--通常在圖片logo的地方會有超連結，讓他回到首頁去-->
      <a href="#">
        <img src="https://picsum.photos/60/40?random=1" alt="圖片">
      </a>
    </h2>
      <!--漢堡選單(手機上要呈現那三根斜線)-->
      <label for="menu_control" class="menu_btn">
        <!--label 和表單有關，控制遠方的 checkbox 打勾不打勾-->
        <span> 選單 </span>
      </label>
      <!--選單-->
      <nav>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
      </nav>
    </h2>
  </div>
</body>
</html>

css 部分

/*先 reset*/
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

.header {
  height: 50px;
  background: gray;
  position: relative;
  align-items: center;
  display: flex;
}

.logo img {
  display: block;
}

.logo {
  width: 60px;
  height: 40px;
  margin-left: 10px;
}

.menu_btn {
  width: 40px;
  height: 40px;
  background: black;
  display: block;
  position: absolute;
  top: 5px;
  right: 10px;
}

.menu_btn span {
  opacity: 0;
}

.menu_btn::before {
  content: '';
  position: absolute;
  height: 2px;
  left: 2px;
  right: 2px;
  width: 36px;
  background: white;
  top: 0;
  bottom: 0;
  margin: auto;
  /*利用 box-shadow 設定另外兩根，陰影的好處在於可以使用影分身之術*/
  box-shadow: 0 8px 0 white, 0 -8px 0 white;
  /*x 軸不偏移，y軸偏移, 要否模糊, 色彩*/
}

nav {
  /*在手機上出現，高度滿版*/
  width: 80%;
  height: calc(100vh - 50px);/*用 calc 將他的高度做到剛剛好*/
  background: lightgray;
  position: absolute;
  left: -100%; /*先讓 nav在外面 stand by，當 menu control 被打勾再讓它進來*/
  top: 50px;
  transition: 0.5s;/*讓他有移動的感覺*/
}

nav a{
  display: block;
  text-decoration: none;
  color: black;
  font-weight: bold;
  padding: 10px 20px;
  border-bottom: 1px solid black;
  transition: 0.4s;
}

 nav a:hover {
  background: slategray;
 }

#menu_control {
  position: absolute;
  z-index: -2;
  opacity: 0; /*加上opacity 確保他就算出現，在畫面上也看不到 */
}
/*同一層可以用 ~ 選*/
#menu_control:checked ~ .header nav {
  left: 0;
}

@media screen and (min-width: 768px) {
  .menu_btn {
    display: none;
  }
  /*桌機版，logo nav 橫向排列*/
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  nav {
    display: flex;
    position: relative;
    left: 0;
    width: auto;
    height: auto;
    top: 0;
    background: transparent;
  }
  nav a {
    border-bottom: none;
    color: white;
    transition: 0.4s;
  }
  nav a:hover {
    background: black;
    border-radius: 4px;
  }

}

如果希望桌機、手機不要互相複寫，可以在 media query 再做一個手機的，@media screen and (max-width: 767px){} 花點時間去細分，那些是手機、那些是桌機、那些是大家共用的。