如何做響應式排版

什麼是響應是網站

響應式RWD是基於這三大項而成:

1. Fluid Grid 流動佈局
2. Fluid Image 流動圖片
3. Media Queries 針對裝置給不同樣式設定

環境設定

在內

<meta name="viewport" content="width=device-width,initial-scale=1">
// 意思是: 強制讓瀏覽器解析度 = 裝置的寬度；縮放比為 1

Emmet / ! 已經有預設在裡面

關於 Viewport 的屬性

1. device-width/device-height 畫面(可視域)寬高
2. initial-scale 初始縮放比
3. minimun-scale/maximun-scale 最小/最大可縮放比
   為了避免無盡的放大會讓畫面不清楚，可以設定:
   maximun-scale=2
4. user-scalable 使用者是否可以縮放(yes/no)

CSS3 - Media Query

讓元素在某一特定寬度下產生改變

@media(max-width:768px){
    h1{
        color: red;
       }
 } //在width:768px下，h1文字顏色變紅色。

RWD設計方向

1. 大到小 PC>PAD>PHONE
2. 小到大 PHONE>PAD>PC