我的第一个RWD网页

开始之前先送上菜鸡的code

这是我第一次实作ＲＷＤ的网页，又因为最近同步在看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的地方非常混乱

还在思考这部分的解决办法...希望之後能有机会再跟大家分享