響應式佈局設計

時間 2019-12-06

標籤響應佈局設計简体版

原文原文鏈接

詳細講解響應式佈局
 Bootstrap 響應式設計
 Bootstrap 網格系統
 Bootstrap 響應式實用工具html

響應式設計的步驟

設置 Meta 標籤
經過媒介查詢來設置樣式 Media Queries
設置多種試圖寬度

1設置 Meta 標籤：

大多數移動瀏覽器將HTML頁面放大爲寬的視圖（viewport）以符合屏幕分辨率。你可使用視圖的meta標籤來進行重置。下面的視圖標籤告訴瀏覽器，使用設備的寬度做爲視圖寬度並禁止初始的縮放。在<head>標籤里加入這個meta標籤。bootstrap

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

2經過媒介查詢來設置樣式 Media Queries

Media Queries 是響應式設計的核心。瀏覽器

它根據條件告訴瀏覽器如何爲指定視圖寬度渲染頁面。假如一個終端的分辨率小於 980px，那麼能夠這樣寫：iphone

@media screen and (max-width: 980px) {
  #head { … }
  #content { … }
  #footer { … }
}

這裏的樣式就會覆蓋上面已經定義好的樣式。工具

3設置多種試圖寬度

假如咱們要設定兼容 iPad 和 iphone 的視圖，那麼能夠這樣設置：佈局

/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}

一些注意的

寬度須要使用百分比

例如這樣：post

請輸入代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。