iT邦幫忙

0

我的第一個RWD網頁

  • 分享至 

  • xImage
  •  

開始之前先送上菜雞的code

這是我第一次實作RWD的網頁,又因為最近同步在看Bootstrap。
所以起初覺得很簡單,畢竟Bootstrap打一下md或lg,好像就能通通搞定似的...

結果這一星期被那些width的%啦flex的column啦barabara啦摧殘到不成人形。
隨便看到路上的阿姨都想跟她說:我不想努力了!!!!

但開始這個日記就是想記錄我慢慢進步的過程,順便幫自己做些筆記。
就不多說了,開始吧。


之前做單頁式網頁,其實都蠻土法煉鋼的,就照著header,content再到footer從上到下一個一個的寫。
但練習了Bootstrap之後覺得有模組化真的蠻方便。

所以也初次想要自己組個模組來實踐這次的網頁。

這就是我的第一個難題!
首先是font-size要怎麼規劃,試了幾種方法。
第一次使用8的倍數進位,32px的字就是font-4、40px的字就是font-5以此類推。
但在做響應式時就遇到問題了,字體在不同頁面大小會有變化,結果字型也未必是8的倍數了...
那時候真的很想矇著良心就這樣繼續把頭洗下去,但到後面實在是越來越複雜...

最後得出的結論就是用sm m lg的方式去幫字體建立模組,直接看code時也相對語意話。
在後面改大小時,心情上也愉悅很多!!

在看到助教分享的共同設定時,真的是相見恨晚阿...
希望下週作業能好好的把模組建構好,不要再浪費太多時間打轉了!

以下是我的共同設定筆記


1.共同設定
把字體最好規劃,省得後面還要一個一個打字體。
和一些圖片的大小也統一整理,免除後面還要一個一個打的情況。
我自己也會先把a連結的style都拿掉。

*, *::before, *::after{
  box-sizing: border-box;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
}
img{
    display:block;
    max-width:100%;
    height:auto; 
}

2.容器高度
max-width是在RWD時會用到的方式

.container {
    max-width:1200px;
    margin: 0 auto;
}

3.文字大小
用語易化的方式命名大小,閱讀性佳也更方便在之後做修改。

.h1{
    fonst-size: 
}
.h2{
    font-size:
}
.h3{
    font-size:
}
.h4{
    font-size:
}
.h5{
    font-size:
}
.h6{
    font-size:16px;
}


.font-sm{
    font-size:
}
.font-m{
    font-size:
}
.font-lg{
    font-size:
}

4.色彩
使用語易化的命名
主要色(明暗變化)、強調色(次要色、重要、執行關鍵)
primary主色
secondary次要色
warning警告
danger危險

.text-primary {
   color: blue;
}
.bg-light{
}

希望下次能更好的運用模組化,好好解決腦袋混亂的問題!!

再來第二個難題就是RWD了。
看頁面很簡單,但要做好RWD真的要注意好多細節。
第一關就被圖片卡關很久...才想起來要用%數去處理寬度。整個豁然開朗起來

%和flex的運用真的可以很快做出圖片列表,文字列表的RWD版型!

但這次在寫作業時也遇到了不同ul的排版在縮小時要併排在一起
頓時不知道該怎麼處理...
我的方法是又塞了一個只在md大小時會出現的code
導致我的程式碼在footer的地方非常混亂

還在思考這部分的解決辦法...希望之後能有機會再跟大家分享


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言