規劃首則
- 以內容優先
- 內容規劃 - 網頁區塊模組化
- 以行動裝置優先
- 當螢幕變小時，能用的畫面空間不足，RWD 的基本策略就是把內容往下擠、縮小、或隱藏次要的元素功能。
- 因此要先想好內容的排列順序，能確保最重要的內容在最上面
- 一方面也要將可能被縮小、隱藏的元素和主要內容盡量切割開來，以免再調整樣式連帶影響主要內容
- 如果多語系，可以從英文版開始設計
視覺設計要點
- 一致性
- 常用對比顏色去凸顯(例如選單和內文背景色對比)，全站色彩規劃一致，標題與內文要易於辨識，因為小的行動裝置不需要太多裝飾或花俏設計，而是以易於閱讀、易於瀏覽為優先
- 視覺上的反饋設計
- 若有餘力則進一步考量行動裝置與電腦的不同
- 例如：按鈕在行動裝置中，按下去才有效果，hover 在行動裝置中則無用 * 例如：自動捲動的圖片，除了在電腦能點選左右鍵換圖外，是否能支援 touch 時左右滑動
實作技術
- Meta Tag 寫法
- 對瀏覽器說：viewport 規則套用，寬度設定為 device-width，且初始縮放數值為 1
- 寫 RWD 要記得加入此行!!!!
<meta name="viewport" content="width=device-width, initial-scale=1" />
- CSS Media Queriers
/* lg >= 1200px */
@media screen and (min-width: 1200px) {
.class {
color: red;
}
}
/* md < 1200px */
@media screen and (max-width: 1199px) {
.class {
color: red;
}
}
/* sm < 992px */
@media screen and and (max-width: 991px) {
.class {
color: red;
}
}
/* xs < 768px */
@media screen and (max-width: 767px) {
.class {
color: red;
}
}
- 自適應的 Grid
- 利用 % 或 em，不用 px
- 自適應的 image _ 最好讓圖片都隨著外圍容器(Grid)縮放 _ 若不想讓圖片過度放大而模糊，只要把 width 改為 max-width 就好
img {
max-width: 100%;
height: auto;
}
- 隱藏或顯示 content
/* desktop */
@media screen and (max-width: 980px) {
.col {
width: 25%;
}
}
/* tablet */
@media screen and (max-width: 720px) {
.col {
width: 50%;
}
}
/* phone */
@media screen and (max-width: 480px) {
.col {
display: none;
}
}