Try   HackMD

作業

網站

  • 整組只能使用2個絕對定位

發問直播

時間軸

12:07 切五欄demo
12:10 5倍官網切版demo
12:40 RWD demo
14:00 Basis
14:15 sticky
15:10 RWD

切版問題討論

居中問題

  • 調整區塊居中用哪個設定?
  • 調整區塊內的 "文字" 居中用哪個設定?

頁面類型

  • 清單類型有哪些?

預先設定高度的問題

  • RWD 做動態寬度可能出現哪些問題?
  • 嘗試做 RWD 尺寸卻不會自動縮放,問題可能出現在哪裡?
  • 內容溢出區塊怎麼處理?
  • overflow 的三個設定 hiddenscrollauto 的差別?

預設寬度的問題

  • 用容器裝著固定寬度的原因是什麼?壞處是什麼?
    (跟螢幕解析度後來變寬有關)

切版實作

分析

  • 哪些區塊要先設定滿版?
  • 哪些欄位有固定寬?比例大概是多少?
  • 初切時有哪些部分設定可以共用?(先抓出網站內區塊相似的規則)

寫html

  • sectiondiv的差別? (斷開連結)
  • container裡為什麼用padding處理上下間距?(限制內容區域的寬度)

RWD

  • 如何調整螢幕尺寸? @media screen

basis 基本值

主軸上面的長度

  • flex-basis 是設定寬度還是高度?應該寫在父層還是子層?
  • flex: 設定了哪三個尺寸?順序是?
  • flex-basis 尺寸要設定成 0 時要注意什麼?(會影響 IE)

sticky

  • 為什麼不用絕對方向名稱的方式(left, right)做分類?有什麼壞處? (RWD、修改彈性)
  • sticky要設在資料比較多的地方、還是比較少的地方?
  • sticky 會被固定在哪個範圍內?
  • sticky 可以應用的地方? (其他網站的例子:巴哈姆特)
  • stickyfixed 相比的差異? 捲到父層的底部之後會發生什麼事?

RWD

媒體查詢

@media 裝置 and (條件) {
 要執行的內容
} 
  • 條件 min-widthmax-width 分別是指?
  • 手機和平板的尺寸是? (可以去哪裡查?) (992px)
  • 條件的尺寸為什麼要從小的寫到大的?反過來寫會出什麼問題?

RWD 動態寬度的計算方式

有三種寫法

  1. calc
  2. 手動計算。為什麼間距會隨著螢幕縮小而變小?(%)
  3. 讓間距固定的方式。 (父層做border-box, padding內縮看起來像子層的margin)
  • 下次上課:簡介如何把間距固定的方式寫成隔線系統?

RWD練習題

設計一個RWD網站,
最大寬度1200px,每欄margin 10px
手機上顯示為1欄;(小於768px)
平板直向顯示為2欄;(768px以上)
平板橫向顯示為3欄(平板橫向以上為992px)
桌機時顯示為6欄。

第一種: calc

CodePen Demo

起手式: 設定外層

css

    .wrap {
      width: 100%;
      max-width: 1200px;
      margin: auto;
      display: flex;    
      flex-wrap: wrap;        
    }

接著先從小尺寸螢幕寫起。利用calc把百分比換算成px

    .item {
      width: calc(100% / 6 - 0.0125);
        /*   15/1200=0.0125     */
      margin: 15px;
      background-color: pink;
    }

寫其他的@media
calc有趣的是,單位(%和px)可混用計算

    @media screen and (min-width: 768px){
    /* 不管是哪種尺寸都會有欄位折到下一行的特性 */
        .wrap {
            display: flex;
            flex-wrap: wrap;
          }
        .item{
            width: calc(100% / 2 - 30px); 
            background-color: red;
        }
    }
    @media screen and (min-width: 992px){
      .item{
          width: calc(100% / 3 - 30px);
          background-color: orange;
        }
    }
    @media screen and (min-width: 1200px){
      .item{
          width: calc(100% / 6 - 30px);
          background-color: green;
        }
    }

第二種: 手動計算

css

    .wrap {
      background-color: #ccc;
      width: 100%;
      max-width: 1200px;
      margin: auto;
    }
    .item {
      /* width: calc(100% / 6 - 0.0125); */
      width: 100%;
      margin: 15px;
      background-color: pink;
    }
    @media screen and (min-width: 768px){
      .wrap {
        display: flex;
        flex-wrap: wrap;
      }
      .item{
        /* width: calc(100% / 2 - 30px);  */
        width: 46.09375%;
        /* 768 / 2 = 384, 384 - 30 = 354,  小數點後6位數  */
        background-color: red;
      }
    }
    @media screen and (min-width: 992px){
      .item{
          /* width: calc(100% / 3 - 30px); */
          width: 30.30914%;
          /* 992 /3 = 330.666667 - 30 = 300.666667再/992  */
          background-color: orange;
        }
    }
    @media screen and (min-width: 1200px){
      .item{
          /* width: calc(100% / 6 - 30px); */
          width: 14.166667%;
          /* 1200/6 = 200 - 30  = 170 再/ 200*/
          background-color: green;
        }
    }

第三種: 父層做border-box, padding內縮

多加一層.col包住每個.item,再由.col設定padding

css

    .wrap {
      width: 100%;
      max-width: 1200px;
      margin: auto;
      display: flex;    
      flex-wrap: wrap;        
    }
    .col {
      box-sizing: border-box;
      padding: 0 15px;
      width: 100%;
    }
    .item {
      background-color: pink;
      height: 500px;
      border: 2px solid #000;
    }
    @media screen and (min-width: 768px){
      .col {
        width: 50%;
      }
      .item {
        background-color: lightgreen;
      }
    }
    @media screen and (min-width: 992px){
      .col {
        width: 33.33333334%;
      }
      .item {
        background-color: lightblue;
      }
    }
    @media screen and (min-width: 1200px){
      .col {
        width: 16.6666667%;
      }
      .item {
        background-color: lightcoral;
      }
    }