我遇到的RWD网页难题

上次文章终於迎来续集 我的第一个RWD网页

这次的网页练习跟上次的网页是同系列的，不过这次可是有记起上次的教训。
也第一次使用了SCSS和GitHub。（这部分之後再来跟大家分享）

记取教训的我，和使用了SCSS所以速度加快了不少，
也因为第一次写的版型是最难的，所以这次作业对我来说就像一些虾兵蟹将（？！

即使这样我也是花了足足四天多才完成这次的两页网页+RWD...
先附上我菜鸡code

首先这次好好的观察了这些页面的字体大小，
并把line-height和一些常用到的设定先写好。
因为这次图片多，重复性也高，所以就把img和a连结也都一次处理起来。

字的大小就是依照设计稿出现的字型大到小去排列的

这次决心打掉重练，所以header和footer这两部分的layout也重刻了，
然後好好的把RWD的方式规划规划。

真心觉得这部分的footer是这个作业中最让我烧脑筋的地方。
接下来就跟大家分享我自己的难题和我所尝试的解决方式～

首先是电脑版的画面。

第一次实作时我大多使用flex方式排版，然後justify-content-space-between轻松完成。
但缩小成mobile版面我就头大了！

这是pad版的画面。

大致上没什麽区别，在logo的地方下display:none就可以轻松完成！
这时候mobile在我背後笑得很得意！

这是mobile的画面。

看起来简简单单，nav的地方用display:none一样轻松K.O
但电话、信箱的link，和那些icon我在pc版的时候是分开ul写的，
要放上去做排版时，又被上面隐藏的nav占着位子...整个卡住。
我上次的解决方式是，写一个平常是none状态的，然後在mobile才block的那些link。
搞得我footer那串code直接长出一些乱七八糟又臭臭的东西，看得实在很不如意。

这次我可是记取教训的人啊！
而这次的解决方式我是把他们写在同个ul里面，并用flex-wrap去做推挤。
设定大家不同宽度的％数，暂时把电话和信箱的link推挤到第二行，
当画面缩小到mobile时再更改％数。让他们轻松排版！！

而下面的copyright在pc版时我使用margin-left:auto，
mobile时用flex-direction:column让他垂直排列，
不过要记得把margin:auto给设定成0，不然他可完全不理你的～

而这两页的content内容其实熟用flex都可以轻松处理了～

这算是我第二次写RWD的网页，深刻体会手刻RWD真的要在一开始注意到各种不同的细节。

也一直在写code时想到老师说的，RWD不会让你的code变三倍，但绝对要花三倍的时间啊！

好的，相信未来还有更多RWD的难题和解答在等着我！下次见罗～