第三週 - RWD 一點都不難，手把手打造手機版網頁

開課提醒

1. 錄影
2. 不需報到
3. 講解主線任務
4. 講解小組任務
5. 響應式
   • 秘密一：meta 語法
   • 秘密二：外容器與內容器寬度設定
   • 秘密三：透過斷點控制樣式的變化

響應式介紹

• 手機、平板、桌機等尺寸都能兼容的網頁
• 響應式語法設定
  ​​​​<meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• Media Queries
  ​​​​@media(條件){樣式} 
  

  滿足條件則會開啟樣式

CSS 覆蓋

• CSS 覆蓋

  題目一：

  ​​​​<h1 class="title">...</h1>
  

  ​​​​.title {
  ​​​​  color: red;
  ​​​​}
  
  ​​​​.title {
  ​​​​  color: blue;
  ​​​​}
  

  題目二：

  ​​​​<h1 class="title title2">...</h1>
  

  ​​​​<h1 class="title2 title">...</h1>
  

  ​​​​.title {
  ​​​​  color: red;
  ​​​​}
  
  ​​​​.title2 {
  ​​​​  color: blue;
  ​​​​}
  

• 先看權重，再看先後
  html tag 1 分
  class 10 分
  id 100 分
  inline style 1000 分
  !important 10000 分

  題目一：

  ​​​​<div id="color-id" class="color-class">Color</div>
  

  ​​​​.color-class { 
  ​    color: blue;
  ​}
  ​#color-id { 
  ​    color: red; 
  ​}
  
  ​div {
  ​    color: yellow; 
  ​}
  

  題目二：600px 時文字顏色

  ​​​​<div id="color-id" class="color-class">Color</div>
  

  ​​​​@media (max-width: 768px){
  ​    #color-id { 
  ​	color: black;
  ​    }
  ​​​​}
  
  ​​​​@media (max-width: 576px){
  ​    .color-class { 
  ​	color: red;
  ​    }
  ​​​​}
  
  ​​​​div { 
  ​​​​ color: yellow; 
  ​​​​}
  

斷點

下面是 2022 年市場上常用的移動裝置和電腦螢幕解析度的分佈情況，不同品牌和型號的裝置螢幕解析度都不一樣

常使用的斷點：

1280
992
768
576
414
375

中場休息 - 好康分享

1. 6/2(四) 21:00 將提供體驗營專屬，3 小時快閃優惠，想獲得更多前端技能，請預約 Line 提醒
2. 團戰任務來惹！

container 與內容器

• container
  • 容器。通常我們網頁主要的內容都會放在 container 裡面，是為了視覺上的瀏覽可以專注在網頁中心。
    ​​​​​​​​.container {
    ​​​​​​​​  max-width: 1120px;
    ​​​​​​​​  margin: 0 auto;
    ​​​​​​​​  padding-left: 16px;
    ​​​​​​​​  padding-right: 16px;
    ​​​​​​​​}
    

• 內容器
  • 寬度單位使用 %
  • 斷點搭配寬度設定
    ​​​​​​​​.item {
    ​​​​​    width: 50%;
    ​​​​​​​​}
    
    ​​​​​​​​@media (max-width: 768px) {
    ​​​​​    .item {
    ​​        width: 100%
    ​​​​​    }
    ​​​​​​​​}
    

• 實作範例：範例程式碼
  四個一排
  
  
  兩個一排
  
  
  一個一排
  

觀念分享

• 不能出現 x 軸！（有 x 軸會退作業）
• 不能將內容器寫死寬度 (px)
• 總複習：日本麥當當、星巴克

證書任務二講解

• 版型規劃
  • 規劃流程
  • 建議先不要做 header 和 footer 區塊
  • 可以不用做出圓點＋好評如潮區塊可不需要點點點的切換樣式
• 實作「三大平台，我來搞定」區塊
• 常見問題的文案
  • Q1.我要怎麼變更方案？
    請聯絡您的業務專員修改訂閱方案，我們將為您進行變更流程。
  • Q2.如果我沒有LINE官方帳號怎麼辦？
    沒關係的，只要您是我們任何一個方案的夥伴，我們的專員可以協助辦理哦！

• 設計稿網址：https://xd.adobe.com/view/4922398e-1a6e-4d4b-848c-044a079713bb-1c71/screen/cb9d2488-08ba-4589-98ad-eecdb84dcb93/specs/
  

表單填寫

2022 公益體驗營 - RWD