RWD介紹

發表於 分類於

語法

@media(max-width:992px){
    .title {
        color: #fff;
    }
}

權重

權重一樣的狀況， css 的語法會後蓋前，跨檔案（css）也是。

  • HTML 標籤：1 分
  • class 選擇器：10 分
  • ID 選擇器：100 分
  • inline style：1000 分
  • !important：10000 分

響應式網頁不要出現 x 軸

img {
    max-width: 100%;
    height: auto;
}

% 也很好用

% 會隨著父容器而變大變小

斷點規劃

  • PC - 1200px
  • iPad - 992px
  • iPad以下 - 767px
  • iPhone 6 Plus - 414px (視專案族群)
  • iPhone 6 - 375px (視專案族群)
  • iPhone 5、SE - 320px

其他補充

RWD（Responsive Web Design）「響應式網站設計」

內容就像水

在各種裝置中自然的流動成最適當的樣子

隨著行動網路的取得越來越方便

更多的使用者開始使用各種不同裝置來上網

合宜的網頁架構

適當的元件設計

可以讓使用者的體驗更佳

響應式就很重要了

常用的 RWD 的網頁框架

  • Bootstrap
    Bootstrap是由Twitter開發，包含Javascript、CSS等…相關檔案，是自由度高、也是目前最多人使用的RWD開發工具。

  • Foundation
    Foundation是由ZURB出品的RWD開發工具，以Mobile First為設計原則，適合以Mobile為優先考量的網站。

  • Pure
    Pure是由Yahoo推出的RWD網頁開發架構，單純只使用CSS，適合大量客制化的網站。