iT邦幫忙

2

[鼠年全馬鐵人挑戰] Week13 - 超新手學習筆記:如何開始撰寫 RWD

又過了一週啦~
一樣是超忙的一週~~
下班回家努力練習切版直播的作業,不過這次的版型比較複雜所以卡關了QQ
真的是燒腦燒到一個極點/images/emoticon/emoticon02.gif
這次的作業除了 PC 版之外,還需練習 RWD 平版及手機的寫法
嗯 一如往常的 一路卡關到底 (蓮花指大哭跑走ing~~~
坐在電腦面前發呆兼「這是哪裡,我是誰,這是異次元空間嗎?」的無力感的我.....
覺得這樣下去不是辦法,所以休息一下來做個筆記吧~!(好啦,順便交文章嘛...)

RWD 要如何開始寫呢???

要寫 RWD 之前,基本上應該都會先寫好 PC 版的 HTML及 CSS(有直接寫 RWD 沒寫 PC版的嗎?)
RWD 撰寫的方式最常見的是直接在原有的 CSS 檔案裡在加上 RWD 的語法,在加以變化;

另一種方法是另外在新增CSS 檔案,如果有寫到平版及手機,則新增兩個 CSS 檔案,新增的檔案只寫該裝置的 RWD 語法,範例如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>glasses</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/glasses.css">
  <link rel="stylesheet" href="css/glasses_pad.css">
  <link rel="stylesheet" href="css/glasses_mobile.css">
</head>

除了原本清除原本 CSS 樣式的 reset.css、PC版的glasses.css
下面兩個 CSS檔案就是分出來撰寫平版及手機版的 CSS
我覺得這樣分出來的寫法比較適合一開始還不熟且容易搞混的新手 (對,就是我.....)
先分開寫,等熟悉了以後在合併在一個 CSS裡,新手如果跟我一樣怕搞混可以先試試這樣的做法唷:)

這裡要注意的是,撰寫 RWD 前要先注意 HTML有沒有這段語法:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

通常一開始再用 vs code快捷鍵 ! tab 系統就會預設這段語法,要有這段語法 RWD才能有作用喔!!!
沒有這段語法,要記得加上去

寫進 CSS 裡

在寫 CSS 前記得要加 @media(max-width: XXXpx) {}
最大寬為多少尺寸,最常見的是平版:768px、手機375px
看專案需要讓多少裝置使用者瀏覽而定,RWD的相關語法要寫在{}裡
範例如下:

@media(max-width: 375px) {

  /* 頁首區塊 */
  header {
    padding: 10px 0;
    height: 30px;
    position: relative;
  }

  header div {
    width: 100%;
    text-align: center;
  }

  header div img {
    width: 48px;
  }

  header .menu_line {
    display: block;
    position: absolute;
    width: 24px;
    left: 16px;
    top: 13px;
  }

  header ul {
    display: none;
  }


  /* 封面的區塊 */
  section.container-cover .title p {
    font-size: 16px;
    line-height: 22px;
  }

  section.container-cover .title-h1 {
    font-size: 32px;
    line-height: 45px;
  }

  section.container-cover .title {
    margin: 163px 12px 0 0; 
    max-width: 363px;
  }

  section.container-cover {
    background: url("../images/68@2x.png") center / cover no-repeat;
    height: 394px;
    background-size: 375px 394px;
  }


  /*專業的區塊*/
  .container-profession .profession-wrap {
    padding: 32px 0 56px;
  }

  .container-profession ul {
    max-width: 224px;
    margin: 32px auto 0;
  }

  .container-profession ul li {
    margin-bottom: 28px;
  }

  .container-profession ul li:nth-child(2) {
    margin-bottom: 28px;
  }

  .container-profession ul li:nth-child(3) {
    margin-bottom: 28px;
  }

  .container-profession ul li:nth-child(4) {
    margin-bottom: 0;
  }

  .container-profession .profession-h2 {
    font-size: 24px;
    line-height: 33px;
  }

  .container-profession .profession-h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .container-profession p {
    font-size: 16px;
    line-height: 24px; 
  }






  
}

由上面程式碼,我們可以知道 手機版的相關語法都已寫進 @media(max-width: 375px) {}的 {}裡了,一開始我覺得好奇怪,{}裡面還可以再給class 再寫他的相關樣式的語法嗎?整個很怕是不是會破版或跑不出來,
答案是:不會的XD 勇敢的給他寫上去吧!!! 這樣才是正確的寫法唷:)

在這裡分享一個我在練習時出了一個錯誤,就是我發現我寫了一段語法為什麼 手機版的沒作動,PC 版被影響惹!!!oh,不!!! 怎麼降!!!
仔細一看,喔~原來我最下面的 } 沒加 這樣是一定會影響到 PC版der~XDD

OK! 筆記做到這,繼續努力研究 RWD 去,加油~go!!!


尚未有邦友留言

立即登入留言