一、如何判斷用什麼響應式斷點?
1.如果有舊網站,就使用google analytics分析觀察數據判斷。
2.如果沒有舊網站,就以最熱門解析度為主。
二、熱門解析度有哪些?
把時間浪費在有質感的事物上
- Dec 28 Thu 2017 16:36
『RWD』 如何判斷響應式網頁斷點
- Dec 28 Thu 2017 15:17
『RWD』用UI/UX思考進行響應式網頁設計
『RWD』用UI/UX思考進行響應式網頁設計
- visual route:考量使用者的視覺動線,非所有內容都要放進去
- human factor:一行文字內容剛剛好的字數很重要,滿版的文字對於視覺來說負擔太大,太短的行寬對視覺來說換行頻率又太頻繁。RWD依照文字多寡來換成單行或雙行。
- finger experience:增加每行的上下padding(44px為佳),以增加使用者手指操作體驗。
- less is more:把真正重要的PC端元素放入手機端就好就好。例如:製作響應式網頁時,頁面中的「產品內容」就是重要的,必須留下來。
- difference of manipulation:PC時考慮滑鼠hover、mobile時考慮手指touch,依照不同載具做不同考量。
- show and hide:考慮不同斷點要出現的元素,以及要隱藏的元素。例如:寬螢幕解析度時漢堡選單需隱藏、窄螢幕解析度時並列水平並列的選項需更改顯示方式。
- software assist:用chrome 的 responsive inspector 偵測斷點,搭配mediaqueri.es,來了解斷點設計。
- Dec 28 Thu 2017 14:26
『READY選讀』一顆黑豆賣遍全世界 食物上網這樣賣,營收千萬做得到 自家美食、地方特產、小農商品網路熱銷的14項鐵則(法則7-1)
- Dec 28 Thu 2017 11:27
『入門文章』1分鐘設定-在痞客邦使用高光效果程式碼
- Dec 28 Thu 2017 11:07
『RWD』響應式網頁排版觀念
rwd版型排版觀念:
- 用width會出現x軸bar,這個狀況是響應式設計不允許出現的
- 用max-width可以自適應內容
- 用%會依照父元素(瀏覽器)寬度來算比例(父元素為100%,子元素相加為100%)
- 不管設計幾欄版面,總和的%數要加起來為100%
- 左側float固定,右側流體設計,右側用margin-left往左推
- 在斷點時可以清除浮動float:none,加上自適應螢幕解析度width:100%。斷點時再把margin-left歸零
- rwd時的css reset可以加入兩行
*,*:after,*:before {
box-sizing:border-box;
}
img {
- Dec 28 Thu 2017 10:17
『RWD』chrome、safari內建模擬rwd內建工具
- Dec 28 Thu 2017 08:28
『美食推薦』新北/新店 巷弄內的日式甜點店 小樂堂
那天晚上準備要去新北耶誕城,想說下午就安排來吃日式甜點吧
小樂堂在大坪林站旁的小巷子裡面,出站大約3分鐘可以走到
自己對在巷弄裡面的店情有獨鍾,想說跟大馬路旁的店家比起來少了過路客的他們
他們一定是有某些吸引力,才能夠讓人們願意特地到巷子裡面找他們
- Dec 27 Wed 2017 16:26
『RWD』 漢堡選單 學習筆記
- Dec 27 Wed 2017 13:45
『開箱介紹』Macbook pro 12 13 15 吋筆電必買 incase Nylon Compact 保護套
身為蘋果控一定會想要自己身邊的東西除了apple的東西以外,也都是很有質感的吧!
先不介紹這個品牌,我知道的是incase他們是一個專門做apple周邊產品的美國品牌,
這是我第一個incase產品,外型很洗鍊簡潔,這是我挑東西的考量之一。
跟我的macbook pro 15"合照,跟moleskine 2018筆記本合拍一張,
- Jun 22 Thu 2017 10:37
[切版入門] CSS 網站圖文切版