[Hexschool Web Layout Training] — Week_3 伸縮自如的 RWD 手機網頁排版術

發表於 2020-04-29 更新於 2024-01-28 分類於 Code ，前端， Hexschool-Web-Layout-Training[六角網頁切版直播班] 文章字數： 3.3k 所需閱讀時間 ≈ 3 分鐘

Introduction & 前言

終於來到這次上課一直想好好學好的地方了，沒錯，就是 RWD，如何搭配 Flex 切出完美的 RWD，製造出完美的 UI/UX 體驗就是本週要上的課了！

是說本週個人作業突然大耀進，感覺大家都卡住了Q，這次自己的作業也還有很多瑕疵的地方，但在工作與練習之中取得最大的平衡了，修到剩一些小問題 ( 自己說HaHa

剩下的就有望助教及校長指導了…Orz

Summary & 摘要

*本篇文章將會以三個角度來紀錄， 課程心得(上課後的心得整理)、練習心得(做完作業後的心得整理)) 及 **小組任務(每週會有一項小組任務，寫完後的心得)*。

每週的練習挑戰和地下城有點像，都有自己必須練習到的地方；本週需要練習的目標有至少兩點以上的練習菜單，及額外的一項打字練習。

熟悉三個編輯器熱鍵
大推真的加快寫 Code 速度很多 -> 幾乎全程使用 emmet 開發
英打速度 練習

關卡目標

RWD 響應式設計原理
CSS Media Queries 語法運用

課程心得

本週 RWD 終於開跑，點開本週作業範例就呆在原地幾分鐘過去了，難度突然是 UpUpUp 往上跑，本週也有一些 Hover 及使用 JavaScript 的地方，還好還算應付的來。

本週主要使用的 CSS 語法主要也是 display: flex;！

RWD 起手式

學好 RWD 有兩件重要的事情記住準沒錯，第一件事在課程開始時就先提到想做 RWD 的朋友，在你的 HTML 的 META 一定要加上一句語法：

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

校長洧杰：說要做 RWD 但沒加這行的人你就盡量笑他吧！沒加這行網頁出現 X 軸的我就把他釘到牆上！

這句基本意思就是說我的寬度會自適應裝置的寬度，並且縮放比為1，記得要乖乖的加上去喔！

第二件事就是記住怎麼使用 CSS media Queries 語法(後面會提到)！

寬度那些事

切記開始寫 RWD 後就不要寫死寬度了，但請加上 max-width，視窗縮小時，加上 max-width 的地方會自動縮小。

另外百分比的算法就是除總寬，例如 1000px 的 20% 為 50px，靈活的運用百分比會讓你排版更輕鬆。

權力重遊戲

講到 CSS 一定要來提到權重的問題，記得會接觸六角就是因為當初自己寫的 CSS 太髒被後端工程師砲轟。

你一定接觸過 CSS 下滿滿的 !important 抑或是直接在 Element 上下 style="width: 200px" 直接就開幹的人，也會遇到用 id 當 CSS 選擇器的人(都市傳說聽說渲染比較快)，別懷疑這些我都幹過！

剛開始切版連 CSS 怎麼獨立出來都不懂，後來只知道怎麼加上樣式，也不知道要怎麼給 Class 取名稱，現在就讓過來人告訴你權重那些事。

你一定好奇過 HTML 的 Element 上可以下 style，id 可以當選擇器，甚至有些 CSS 覆蓋不過去，下一個 !important 就收工。

那如果這些都蹦再一起呢？蹦出新滋味？錯！你會蹦出別人的一堆髒話！

權重其實很簡單，他們都有各自的分數，就跟先乘除後加減一樣。

仔細看下方的表格：

	權重分數	範例
HTML	1	p、span、div…
Class	10	.title、.container…
ID	100	#menu、#sideBar…
inline style	1000	style=”width: 200px;”
!important	10000	width: 100px!important

!important > inline style > ID > class > HTML

CSS 先比權重分數，相同在比順序，後者覆蓋前者。

斷點該選哪？

Media 的用法其實很簡單，有幾種方式：

@media (max-width: 768px) {
  color: red;
}

@media screen and (min-width:375px) and (max-width:768px) {
  color: blue;
}

@media not screen and (min-width:375px){
  color: yellow;
}

第一種為最簡單用法，顧名思義就是最寬到 768px 顏色都是紅色，第二種為 375px 到 768px 之間顏色都是藍色，第三種為除了小於 375px 顏色都是黃色。

其實主要就是定好範圍或是一個值，並且用 max 或 min 來判斷。

這邊通常我們在切版時會定下幾個斷點，比較常用的有 767px、414px、375px…

課堂小補充

前面我們有使用 CSS 很常提到 CSS Reset，但通常我們會在自己加上兩段語法：

img {
    max-width: 100%;
    height: auto;
}

*, *::before, *::after {
 box-sizing: border-box;
}height: auto;
}

一個是圖片自適應寬度，另一個則是寬度多少為多少，不會瘦 padding 及 margin 影響！

練習心得

本次練習持續使用 emmet 來寫，私心推啊！真的快很多。

本週的個人作業有點小難度，尤其是中間的 聯名設計鏡框 區塊，搞了老半天還是卡在那邊，另外設計稿有偷偷藏陷阱，在 Banner 下方的四個 Icon 縮小時竟然對換位子了，還好
Flex 有 order: 2; 可以處理。

CSS Animated

頁面有使用到 Hover 的功能，但如何讓 Hover 結束之後能補上之間的補間動畫呢？

.collectionSecond .btnArea .btnArea__btn__text:before {
  content: 'MORE';
  position: absolute;
  color: var(--primary-color);
  top: 0;
  transition: top .5s;
}

以上方為例子，如果想更改 Hover 時文字會往上跑，那你的 transition 後面就要加上你改的東西。假使要改 width****、color…等等，一樣在 transition 後面加上你要改的東西，也可以直接寫 all>

Javascript

另外在漢堡鈕的部分也使用了 Javascript 來達成，這邊需要 CSS 做搭配，簡單說就是點擊漢堡鈕後替指定的 Element 加上 Class，然後再透過 CSS 去打開菜單。

這邊助教有寫範例可以參考：點我

小組任務

本週小組任務可挑兩項來做：

任務一 - 看圖作範例

本週老師有提供一系列的版型範例，有興趣的朋友也可以載下來玩玩。

版型的切版也是幾乎都用到 display: flex;，但是有一個斷點會讓畫面變更排版，這邊是使用 768px 設為斷點，縮小時只要覆蓋掉前面的 CSS 即可。

.main {
  margin-bottom: 5px;
}

@media (max-width: 768px) {
  .main {
    flex-wrap: wrap;
  }
}

在畫面到 768px 時後面的 CSS 會打開。

任務二 - IT 邦偵探遊戲

這邊會再補上心得。

任務三 - 討論第三週版型該怎麼做

本週大家都卡關了，但夠過同學分享的東西總是能學到點什麼！

Conclusion & 結論

在切得焦頭爛額之際，上去繳作業平台寫著 可只完成首頁版型，不需完成 FAQ 頁面版型，但假使想都提交也 ok，所以再趁還沒有很多人教之前先交一份給助教批改了。

另外最近專案時程更短了，幾乎都是一兩週內要完成一個案子的速度，希望之後還有時間能寫作業Ｑ，這次幾乎是用大半夜零碎時間做出來的，心好累…Orz。

希望這幾週能在這邊學到更多的切版技巧，可以加快自己的切版速度！

想知道 Flex 可以參考我的前幾篇文章 -> [CSS Notes] - 第一次 Flex 就上手

Demo & 成果程式碼

Source Code：點我

Demo：點我