# 季芳

1. 最小尺寸會設定到375px,576px還不是最小的尺寸,可以參考網路上有分享每個裝置的尺寸;如果小於375px裝置,可以在body設定min-width:375px,會出現x捲軸來瀏覽
2. 我在body內自訂的container加上max:width:1000px數值怎麼來的？
* 數值要符合設計稿,例如修改為992px
* 寫法1:不使用bootstrap的container,自己寫
`max:width:992px;`
`margin:0 auto;`
* 寫法2:直接使用bootstrap的`container-lg`
3. 撰寫classname的順序？在同一行html,自訂的class放前面還是放後面？我寫法沒有一致性
4. 觀察設計稿很多其實都是等距
5. 要查詢bootstrap的css,可以用cdn連結直接觀看(把連結的min刪除比較好閱讀)

https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.css

6. 有些class不會用到的就拿掉,例如:nav-light
7. 輪播的pre按鈕和next按鈕z-index高於輪播的文字框,所以輪播文字被按鈕蓋住,是`.carousel-fade .carousel-item.active,`的預設z-index覆蓋到
8. flex-wrap和flex-column都能排出同樣效果,還是有稍微的差異,可以兩者練習試試看
9. 輪播下方的小圖,我用`<a>`包img,
`type="button"` 意思是button預設是submit,改成`type="button"`則是單純按鈕行為
10. 要理解`flex-grow` `flex-shrink` `flex-basis`,
`flex-basis:auto`和`flex-basis:0`差別
11. tips區塊的地方,col裡面沒有包容器,抽換內容要能單獨保留空間,上面的區塊都有,寫法要一致
12. tips的區塊,有序清單如果加爆到10筆資料,會發現對齊有問題
13. footer區的icon的`<a>`可點擊範圍太大,建議`<a>`就不當容器,外面再包一層來排版
14. ©這個符號用`&copy;`
15. 每一個要斷點的元素就寫一次＠media

# Sherry
* 輪播文字span改成p
* grid system用gutter推間距(ex:g-3)
* 有序清單的數字符號用counter試試
參考資料:[MDN-CSS_counter](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)
* 建議統一color的寫法(我的有hex和rgba)
* 用css variable設定和管理變數
參考資料:[MDN-CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)

# Chris
* 不論在哪種尺寸,banner要圖大有重點,設定維持一定的高度,也把banner下方只顯示圖片

原本:

修改後:

如要做的更細緻,讓畫面在任何裝置下都維持一定畫面,不會被裁切,
可以在輪播圖上加上`min-height`與`calc`
寫法:`min-height:calc(100vh - header高 - 下方小圖區高)`
tips:用100vh - header固定距離 - 下方小圖區固定距離(剩下就是變動距離)

* object-fit用在replace element上,例如:`<img>` `<video>`
* 整理成視線範圍內的class(我的完全使用BS的class,太長難閱讀),太長的整理到style.css裡面
* 建議看完liveCoding.tw那兩支影片,並作筆記
* 重點觀念如書上所說