我的第一个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的地方非常混乱

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