# 六角學院:2024軟體工程師體驗營 week 3 【那些學習日子的心得】 <br/> ## 自我介紹 :raising_hand: 2022年底學了一年的網頁開發三寶： HTML、CSS、Javascript，當時學得很懵懵懂懂。2023 年開始自學 UI 設計，4 月中被洧杰老師拍的影片吸引住 ( 就是那部追車的影片 :laughing: ，沒想到接下來切版直播班的更猛:rolling_on_the_floor_laughing: :rolling_on_the_floor_laughing: :rolling_on_the_floor_laughing: )，我被那個努力不懈的畫面激勵了我想拾回學習前端的奮鬥魂，就報名了體驗營讓自學學習的道路上不在孤單。 <br/> <br/> ## 為何學前端 :thinking_face: 最初一開始準備轉職時，我參加了當時的一個月網頁開發體驗課程，就愛上了網頁切版和動畫效果出來的直觀感衝擊，從此也走上這條不歸路？（威～） 因為期間一段暫停時間沒摸就生疏了，今年計畫就是 UI/UX 設計學習後生產作品，搭配前端的重新學習，期待可以做出自己設計的一頁式網頁。 <br/> <br/> ## 本週學習筆記 :writing_hand: #### 第三週 - 響應式網頁設計 [範例程式碼下載](https://drive.google.com/file/d/1r8z8i3LzzEKIzDBlztkpFmuXK6EDyMx3/view?usp=sharing) 利用這 8 個範例來練習 RWD 更深刻的加強印象，這樣實操時才不會搔腦袋看著螢幕不知道該怎麼做，現在就來看看這些範例吧！ <br/> ### **範例一：手機版網頁的環境設定** ![image](https://hackmd.io/_uploads/HyMC9fX7C.png) 首先，我們先來認識上圖中 HTML 環境設置的內容架構都寫些什麼呢? <br/> * **環境設置** ``` <!DOCTYPE html> ``` 這是 HTML5 的環境設置，現在基本上都要加 HTML5 環境 (一開始養成設置環境的好習慣，這很重要 ! :boom: ) ###### :owl: 附加說明: HTML4 現今多多少少網頁架構上還是會看到，而它的環境架設會長怎樣的呢? [參考連結](https://www.quackit.com/html/html_4/tags/doctype_html_public.cfm) <br/> * **讀取中文字體的環境設定** ``` <meta charset="UTF-8"> ``` 若是沒設定，當瀏覽器讀取中文字體時，即會變成一堆亂碼 ![image](https://hackmd.io/_uploads/H1xpQXmmC.png) <br/> * **寫 RWD 最主要的核心 : viewport 設定** ``` <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 它字面上的意思就是: | | 意旨 | | ----------- | ----------- | | **content="width=device-width** | 強制解析度與裝置的寬度一樣 | | **initial-scale =1.0** | 最大/最低的伸縮比例都在一倍 | | **maximum-scale = 1.0** | 最大倍數設定在一倍 | | **minimum-scale = 1.0** | 最低倍數設定在一倍 | 我們將它當作是設定螢幕解析度的**初始化**設定 <br/> <br/> ### **範例二：如何設定 CSS media query 斷點** ![image](https://hackmd.io/_uploads/BJnXvmXmR.png) ![Section 1](https://hackmd.io/_uploads/B1Oro77XC.png) 這就是會偵測到你螢幕解析度的 CSS 語法: ```<code> /*在某個裝置直式下變更樣式*/ @media(max-width: 數值 px){ .選擇器 { color: ......; } .選擇器 { font-size: ........; } } ``` 這段 CSS 設置的意思就是: 如果當螢幕解析在 ___　(數值) 以下的話，大括號內的 CSS 設定就會被啟動，原定的樣式就立即被覆蓋，就如同下圖 ![image](https://hackmd.io/_uploads/H1hHJEm7A.png) 記得寫法必須要由大裝置往小裝置來寫喔！ ``` Desktop (大螢幕解析度) ↓ 平版 (中螢幕解析度) ↓ 手機 (小螢幕解析度) ``` ###### 該如何知道螢幕解析度的斷點數值是多少呢？ 早期的解析度是以裝置的寬度去做設定的，像是 800 x 600、1024 x 768。 現在會是依據下述裝置數值去做設定： * 992px 以下通常都是針對現在平版的裝置樣式 * 768px 以下通常是針對各種手機的裝置樣式 * 現今預設電腦裝置解析度會是落在 1920px 也可以參考 [Bootstrap5](https://bootstrap5.hexschool.com/docs/5.1/layout/breakpoints/#available-breakpoints) 的建議。 ![image](https://hackmd.io/_uploads/ByOOLVQ7R.png) 不過最主要還是要依照老闆的要求為準啦 ! :rolling_on_the_floor_laughing: :shushing_face: :rolling_on_the_floor_laughing: :shushing_face: <br/> ### **RWD 利用權重，再看先後** #### 權重覆蓋法則 * HTML 標籤選擇器：**1** 分 * class 類別選擇器：**10** 分 * ID 選擇器：**100** 分 * inline style　行內選擇器 ( 不要寫在 HTML ，要寫在 CSS 上 )：**1000** 分 * !important：**10000** 分 * 分數一樣者，看先後順序，**後者重**（贏）！ 先看 html 標籤 或是 class 類別選擇器來判斷權重的優先權，基本上開發時建議專注用前兩個來寫就好。 其他的權重類別是分數越高，就是權重地位越重．權重地位越重，瀏覽器就會以權重分數高的CSS　設置條件要求做設定。相對的，權重分數低的就會改不動分數高的。 另外就是，權重一樣的話，瀏覽器就會以最後的設定為基準去做變動。要看權重幾分，就要去 DevTools 上看 CSS 選擇器的顯示，而非看 HTML 喔~ <br/> 現在來看看下方的說明，我們要注意的重點是: ![image](https://hackmd.io/_uploads/ByDCGUQQ0.png) HTML 的 item2 item3 不影響 CSS 設定，一切都是由 CSS　設定的順序後者去影響設計，像是途中 item2 在 CSS 是後者，所以字體顏色顯示出來會是藍色 <br/> <br/> 還有就是，CSS 選擇器若是有出現`,` 逗號，不要打他算進去耶～（如下圖） ![image](https://hackmd.io/_uploads/BkkbZDVXC.png) 像是 h2 的標籤分數是一個 class 類別選擇器，所以權重分數為 10 分，而後面那個　`,h2` 是指其他的 h2 物件，而非指定的該物件，所以分數是分開的 <br/> 還有一個討厭的陷阱題得注意： ![image](https://hackmd.io/_uploads/rJebmw4XA.png) 這個 a 標籤在瀏覽器上會是什麼顏色呢? 答案是...紅色! 因為在 CSS 上寫的是 `a{}` ，而非　`.a{}` ，`.a{}` 是類別選擇器，這裡的 CSS 寫的是 HTML 標籤，它當然是以 HTML 選擇器為設置囉 (果然會令人錯到氣的牙癢癢的:anger: ) <br/> 最後就是: ##### :star2::star2::star2: 假設要去改別人的code，建議你新增一個 CSS file，然後用同樣權重分數的 CSS 設計設定擺在那個人的下方，盡量不要用到 id & !important 去覆蓋! 愛記ㄟ捏!!! :star2::star2::star2: <br/> <br/> ### **錨點** 所謂的**錨點**在網頁頁面上是指一個窗口(聯結點擊處)在一個動作點擊後立即快速的導向 (跳轉到) 某個指定定點，而一個網頁不能有兩個 id 選擇器的錨點 ![image](https://hackmd.io/_uploads/HyJMOP4QA.png) ![image](https://hackmd.io/_uploads/BJofOw4QR.png) 圖中顯示點擊連到頁尾，即跳轉到至footer **id 是拿來用做錨點的 所以開發網頁千萬不要用 id 寫** ![image](https://hackmd.io/_uploads/Hkg6_v4QR.png) <br/> <br/> ### 範例三：使用 container 容器的語法來做排版 **寬度配置** * max-width：運用在圖片與 HTML 標籤上保有既有的寬度 * 父層縮小寬度時，內層的容器（子層）會自動適應變動 ![image](https://hackmd.io/_uploads/ryZXhPE7R.png) 利用 container 將網頁區塊容器能固定置中，並設置　`max-width: 1200px;` 讓區塊的寬度設定隨著瀏覽器一起有彈性制的隨著改變到最大寬度 ( 1200px )，若是只是設置 `width: 1200px;` ，就會出現 **X軸** ( 要用滑軌向右拉，右邊區塊空出來的現象 )，這個情況是不被允許發生的！:point_up::no_entry_sign::point_up::no_entry_sign: 這樣使用者在瀏覽網頁時也會體驗感不適啊~ ![image](https://hackmd.io/_uploads/H1AwyuVQA.png) 記得圖片也要設定彈性最大寬度自動適應瀏覽器 (父層) 喔~不然就又 X軸情況出現了 <br/> <br/> ### 範例四：`%` 單位的運用 ![image](https://hackmd.io/_uploads/B168fONQ0.png) 物件的寬度 `%` 是依照父層的寬度來分配的。如圖中顯示容器（父層）的寬度是 `100px` ，menu（子層）的寬度設定為 30%，所以它的寬度會自動計算成父層寬度的 30% ``` 100px x 30% = 30px /* 子層寬度為 30px */ ``` <br/> <br/> ### 範例五：當 max-width 與`%` 單位一起運用 ![image](https://hackmd.io/_uploads/rkMuHuV7R.png) ``` 500px x 30% = 150px /* 子層寬度為 150px */ 1200px x 30% = 360px /* 子層寬度為 360px */ ``` 物件的寬度 % 是依照父層的寬度來分配的。如圖中顯示容器（父層）的寬度是 500px ，假若 max-width: 1200px，它的 menu（子層）的寬度設定為 30%，那它的寬度會自動與父層寬度一起變化成同寬 30% <br/> <br/> ### 範例六：三欄排版隨瀏覽器寬度而變化 ![image](https://hackmd.io/_uploads/SyQwtdNQA.png) ![image](https://hackmd.io/_uploads/rkBgqO4QC.png) 先將容器的版型格式樣式設定好 ![image](https://hackmd.io/_uploads/HkDH9uE7C.png) ![image](https://hackmd.io/_uploads/H1oF9dEm0.png) ![image](https://hackmd.io/_uploads/H1e65uVQR.png) ![image](https://hackmd.io/_uploads/rknzoO4mC.png) 再運用斷點設定寬度的 `%` ，就會如同上圖不同段點的瀏覽器寬度條件下從三欄自動等比例調整成兩欄，甚至是文字滿版的畫面 ``` @media (max-width:___px) { .news li { width: ___% } ``` <br/> <br/> ### 範例七：三欄式圖文排版 一個小概念: 平板的圖片會比 PC 版的圖片看起會比較大，若是設計師拿平板圖片要求前端工程師做成 PC 版圖片，記得向設計師溝通要求在大張一點的圖片，如 1.3 或 1.5 倍，因為平板二欄式的圖片實際上沒有比 PC 版來的大張，小圖變大圖畫質像數會因放大而變模糊不清楚 ![image](https://hackmd.io/_uploads/rJfAxKV7C.png) 圖片原定尺寸是 `384px x 528px` ，在 PC 版的渲染效果下就會符合大小之外，圖片顯示也是清晰的 <br/> <br/> ### 範例八：利用 flexbox 控制格局來完整版型設計 先設定容器 reset、border-box 環境 ![image](https://hackmd.io/_uploads/B1gGrFE70.png) 再依照瀏覽器斷點 ( 992px ) 去設定 flex-wrap 排版方向 ![image](https://hackmd.io/_uploads/rktHHYE7C.png) ![image](https://hackmd.io/_uploads/Sy8trFN7A.png) ![image](https://hackmd.io/_uploads/HyY88YN7R.png) ![image](https://hackmd.io/_uploads/H1zfIKEQC.png) ![image](https://hackmd.io/_uploads/H1uyPtNm0.png) ![image](https://hackmd.io/_uploads/rkVzwYVmA.png) 通常容器內容若是不是滿版( 不規則排列如 Logo + navbar ) 的情況下，建議可以用 column 的方式去排列。像是範例六的那種兩欄三欄四欄滿版的情況下就可以用 flex-wrap + `%`　去排版 <br/> <br/> ## 學習心得 :thought_balloon: 我覺得 RWD 目前最困難的會是將整頁版型設計刻出來，尤其是用 flex 調整物件的位置，那會是很耗時的工程。接下來我要開始作任務作業二，期望我能達成 LV1 並往 LV2 方向去做。 <br/> <br/> ## 補充學習資源 :owl: * [RWD 排列方式](https://hackmd.io/ROe4tRHSQlSWFNUsYgbQ7w?view) * [RWD 排版與磚牆效果](https://ianchen.thisistap.com/?p=3641) * [RWD 響應式排版實作](https://ithelp.ithome.com.tw/articles/10296170) * [ Windows Responsive Web Design ](https://learn.microsoft.com/en-us/archive/msdn-magazine/2011/november/html5-responsive-web-design)