本周前端拉賽與線上讀書會 "合體"
主題內容: CSS3 Grid Layout
5/18 20:30 準時開台
你一定會想這跟 Bootstrap 有什麼關係
和 RWD Grid 有沒有關係
與 Float, Flex 有沒有關係
告訴你!!!這都沒有關係~~~ 🐩
這次要介紹的是今年 Chrome 才支援的
✨display: grid✨
#挑戰萌德里安
#最接近平面設計的CSS
grid rwd 在 MUKI SPACE INC. Facebook 的最佳貼文
大家安安,我 12 月要開課了唷 (終於....)
這次的課程是 Bootstrap3 的進階版面,會告訴大家該如何用 Bootstrap3 客製化,以及製作兩種有即戰力的版型,期許能讓各位直接用在職場中。
老實說,原本是想開 Bootstrap4 的,可是稍微爬了一下文,有專家(?)預測明年可能都還不會正式發佈,所以就繼續講 Bootstrap3 啦!雖然如此,但裡頭的很多技巧是共通的唷 👍
最後,歡迎上過我「RWD 入門與實戰」以及「前端基礎課程」的朋友報名,可無縫接軌立即上手~舊生也有優惠價唷,只要你上過這兩門課的其中一種,也有興趣想要報名新課程的話,歡迎提供你的名字跟當初註冊的 e-mail 寄給我:mukispace(a)gmail.com
http://muki.tw/course/bootstrap3-adv/
grid rwd 在 91 敏捷開發之路 Facebook 的最讚貼文
#RWD 基本設計原則
10個基本設計RWD時的注意事項,完全圖解說明,重點寫的很清楚。
大致歸納一下重點為:
1.排版越簡單越好(DIV不要搞得太複雜,拿掉inline styles)
2.使用media queries來判別不同的裝置的寬度
3.定義好不同解析度的分界點
4.排版彈性化(使用grid system, 寬度要使用百分比計算)
5.不同裝置使用不同大小的圖片(同一張圖切三種不同大小)
6.善用min-跟max-來控制layout
7.元素盡量使用相對比例
8.當切換到手機版本時,layout以一欄式設計為主
9.盡量精簡手機版內容,只留下最重要的
10.使用實體裝置測試網站(因為電腦模擬有時候不是很準確)