Ray

一、如何判斷用什麼響應式斷點？
1.如果有舊網站，就使用google analytics分析觀察數據判斷。
2.如果沒有舊網站，就以最熱門解析度為主。
二、熱門解析度有哪些？
1. 960px
2. 1000px
3. 1280px（最大通常這個寬度）
4. 1440px
不使用太寬的原因是
- 人類視覺無法看太寬
- 圖太大會載入太久
三、常用的斷點
1. iphone5:320px
2. iphone6:375px
3. iphone6 plus:414px
4. ipad以下:767px
5. ipad以上:768px
注意：
- 不同斷點的圖片大小放不同尺寸的，避免大段點圖片放太大會解析度不夠
- 用iconfinder找SVG圖，SVG圖放大之後不會模糊
四、響應式圖片的css reset

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

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

 
會選這本書來分享主要是因為自己也有投入食品相關產業
在這個領域想要了解更多，更深入，
而且書名直接就告訴你經營單一食品就可以賣得很好
當然會想要知道他到底是怎麼做到的。
作者本身是農家第三代經營者，主要透過非實體通路來販售
產品除了日本還外銷其他亞洲地區

demo:

• 選單一


• 選單二


• 選單三


• 選單四


• 選單五


• 選單六


• 選單七

menu

rwd版型排版觀念：

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

 
 
 

 
那天晚上準備要去新北耶誕城，想說下午就安排來吃日式甜點吧
小樂堂在大坪林站旁的小巷子裡面，出站大約3分鐘可以走到

• 選單一


• 選單二


• 選單三


• 選單四


• 選單五


• 選單六


• 選單七

menu

切版是一個前端工程師的一個基本技能
今天先把一頁式網頁的一個區塊切出來