Ray

父元素:

https://purecss.io/

透過他提升對網頁元素的敏銳度，pure.css的元素對所有瀏覽器都有兼容，而且是yahoo團隊製作，所以完成度很高。

一、使用width或max-width:
width:100%依照父元素大小而可以自適應延伸，如果父元素太大圖片解析度會變差。
max-width:100%可以放大保有原本寬度，向內縮也可以。

二、rwd時css reset增加幾項

一、如何判斷用什麼響應式斷點？
1.如果有舊網站，就使用google analytics分析觀察數據判斷。
2.如果沒有舊網站，就以最熱門解析度為主。

二、熱門解析度有哪些？

『RWD』用UI/UX思考進行響應式網頁設計

1. visual route:考量使用者的視覺動線，非所有內容都要放進去
2. human factor：一行文字內容剛剛好的字數很重要，滿版的文字對於視覺來說負擔太大，太短的行寬對視覺來說換行頻率又太頻繁。RWD依照文字多寡來換成單行或雙行。
3. finger experience：增加每行的上下padding（44px為佳)，以增加使用者手指操作體驗。
4. less is more:把真正重要的ＰＣ端元素放入手機端就好就好。例如：製作響應式網頁時，頁面中的「產品內容」就是重要的，必須留下來。
5. difference of manipulation:PC時考慮滑鼠hover、mobile時考慮手指touch，依照不同載具做不同考量。
6. show and hide:考慮不同斷點要出現的元素，以及要隱藏的元素。例如：寬螢幕解析度時漢堡選單需隱藏、窄螢幕解析度時並列水平並列的選項需更改顯示方式。
7. software assist:用chrome 的 responsive inspector 偵測斷點，搭配mediaqueri.es，來了解斷點設計。

rwd版型排版觀念：

1. 用width會出現x軸bar，這個狀況是響應式設計不允許出現的
2. 用max-width可以自適應內容
3. 用％會依照父元素（瀏覽器）寬度來算比例（父元素為100%，子元素相加為100%)
4. 不管設計幾欄版面，總和的％數要加起來為100%
5. 左側float固定，右側流體設計，右側用margin-left往左推
6. 在斷點時可以清除浮動float:none，加上自適應螢幕解析度width:100%。斷點時再把margin-left歸零
7. rwd時的css reset可以加入兩行

@media (max-width: 767px){

  .menu {

    /*隱藏選單開始*/