---
tags: 2021 網頁切版班, 小組任務
title: 切版問題集小補充｜目錄
---

## 切版錯誤、筆記本

#### 漢堡選單教學資源補充

:::info

攻略一 jQ 資源

有一需要用到jQuery，這裡也附上老師的公開影片

:::

> [洧杰老師兩小時影音課程分享](https://www.youtube.com/watch?v=GVWOIP-HX70)

<br>

:::success
攻略二 jQuery 整合上面兩個範例的檔案
假如你想要實體網頁檔案的整合版本，你可以下載下方連結
:::
> [GitHub 下載處](https://github.com/gonsakon/jQSample) 點選右側按鈕的 Clone or download 進行下載

0. head 裡的兩個 jQ 都要載入到
1. 漢堡選單跟 FAQ 效果我整合到 all.js
2. 如果有變更 CSS 名稱，jQ 選擇器請自行更改

<br>

:::info
攻略三 [漢堡選單收闔範例程式碼](https://codepen.io/TzuHui/pen/WNQRjXd)
:::

> **收闔範例說明**

- 收闔的效果是透過切換 active 這個 class 來達成
- 在 CSS 第 33 行 .dropdown 設定 `max-height: 0`，代表選單預設為闔上
- CSS 第 38 行的 .dropdown.active 代表當 .dropdown 加上 .active 時，就讓 max-height 改為 200px，選單則會展開，變成開啟的狀態。

> **選單定位**

- .dropdown 選單定位是利用 position: absolute 相對定位於 .header top: 100% 是讓選單的位置對齊在 .header 的最下方。

## SCSS 問題集

:::info
這邊以下臨時記錄一些，在slack上同學問關於scss架構的問題，與老師的答覆，希望可以幫助到大家
:::

### 架構拆分建議
- all.scss 請不要在裡面寫 scss，all.scss 都只能拿來 @import 其它 scss 用，可以獨立一個 base.scss 放 11~27 行內容
- 變數不要在各個 scss 上，應統一在一個 variable.scss 來統一管理，原因一樣，你散佈在各個 scss 上會難找

- modules 建議拆出來為 _button.scss，不宜叫做 _modules.scss，因為 modules 與 components 為相同意思，component 裡面應該就放各個元件名稱才是
- util 不宜放在 compontent 資料夾裡，他們兩者概念不同
- .container 不宜放在 util，他算是容器
- component 裡面的 card.scss ，打開裡面卻是 .location 系列設計，這裡說明 components 元件都是以外觀來命名，例如外表像是卡片，那就叫做 .card、.card-body，如果你叫做 .location，那這個元件用在 購物車頁面上，命名就會衝突，例如 pagination 分頁元件設計，就完全正確，.pagination 名稱，不管換到其他頁面上，語意都不會衝突
- 盡量用 util.scss+component 來組出你的樣式，進此減少 pages、layout 的程式碼數量

- [同學scss 規劃 校長推薦新手學習](https://github.com/Lina-SHU/GlassesImage/blob/main/scss/_mixins.scss#L1-L11)
- [逐步整合Sass資料夾]( https://ithelp.ithome.com.tw/articles/10139186)

* 斷點
- grid.scss，768px 請改為 992px，375px，請改為 767px
- 原因是我用 iPhone Plus 414px 觀看時，你的介面並沒有轉成手機版，只有寫 375 以下，就表示你在 767~376 是完全捨棄掉的，所以 767 以下都變成手機版會比較乾脆

### 命名建議
- grey 變數，請用 100~700 從淺至深來調整，不要用編號 1~2，這設定在 BS5、tailwind 框架也有類似概念

### 斷點問題集

第三週的校長筆記有提到RWD斷點參考
PC - 1200px
iPad - 768px
iPad以下 - 767px
iPhone 6 Plus - 414px (視專案族群)
iPhone 6 - 375px (視專案族群)
iPhone 5、SE - 320px

:::info
問題:

上面的iPad-786px是專門給iPad橫式設計專用嗎？ 767px以下就算iPad 直式和手機版共用尺寸?

上週直播有提到以新手簡化版斷點參考, @media(max-width:992px), @media(max-width:767px)

這邊的992px-768px 就直接包含了iPad 直式和橫式, 超過992px算ＰＣ版size, 不曉得我這樣理解正確嗎？
:::

- ipad 橫式是 1024px -> 橫式的話就接近 PC 版，就可視為 PC 樣式
- ipad 直式是 768px -> 直式比較窄，所以在 992px 以下就斷，同時也能兼容比較大的平版的直式樣式
> 所以寫斷點 992，是支援平版 size，寫斷點 767，是能支援各個載具的手機直式與橫式

### each...in for...from 回圈教學與應用
- [影片教學](https://www.youtube.com/watch?v=FkY6xHgjt10)[target=_blank]
- [中文教學文章](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/for...in)[target=_blank]
- [sass官網說明](https://sass-lang.com/documentation/at-rules/control/each)[target=_blank]

## 圖片排版相關

### object-fit
:::info
這五張照片尺寸不一樣，如果不用bg方式有建議怎麼寫嗎？
有在照片加上尺寸 裡面img {width:100%}
這樣圖片會超出原本的高度 給高度100% 圖片又變形
所以想請問有什麼方法可以圖片固定長寬 不用裁切 也不會變形
:::

img {
    width:100%;
    height:150px; /*一定要固定高度*/
    object-fit: cover;
    object-position: center;
}

### Flex Stretch

:::info
今天中午 debug 時間校長有提到，顧客推薦的 card 可以使用 stretch 讓文字自適應高度，嘗試使用 stretch 有成功自適應高度，但遇到另位問題是 body 的文字 space-between 空間沒有自適應高度填滿父層，想詢問各位大大我的 stretch 是不是用錯了？
[codepen 範例連結](https://codepen.io/kent-clark/pen/rNmGzYb)
:::

校長解答：
- 解法1：寫死高度（子層撐出高度，讓主軸、交錯軸對齊）
- 解法2：flex-grow: 1;（下在子層）
透過 flex 特性，使子層延伸空間，佔滿整個父層容器（只有 flex 做得到）

[codepen 校長範例連結](https://codepen.io/hexschool/pen/PomJOVN)
> **延伸空間算法** = (該元素 flex-grow / 所有元素 flex-grow 總和) * 剩餘空間

> **計算範例**
第一張 card (Jessy) 的例延伸空間計算， body 最多內容的 Kyuan （高度 184px）和 Jessy 內容（高度 104），算出延伸空間為 80。
延伸空間 = 1/1 x (184-104) = 80

>**測試是否正確**：在 body 下 height: 184(104+80)px;（查看是否每個 body 高度是否相同）

延伸資源：
[深入解析 CSS Flexbox](https://www.oxxostudio.tw/articles/201501/css-flexbox.html)
[flex-basis、flex-grow、flex-shrink 屬性介紹](https://w3c.hexschool.com/flexbox/9883b0fb)