響應式設計

時間 2019-11-12

標籤響應設計简体版

原文原文鏈接

啓用響應式特性

經過在文檔中的 <head> 標籤裏添加合適的meta標籤並引入一個額外的樣式表便可啓用響應式CSS。若是你已經在定製頁面編譯好一個Bootstrap, 那麼只需添加一個meta標籤。css

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

注意！ Bootstrap在默認狀況下是沒有引入響應式特性的，由於不是任何狀況都須要使用到。咱們並非鼓勵開發者移除此功能, 而是在須要使用的時候才啓用它。ios

關於響應式Bootstrap

Media queries容許在一些條件基礎上自定義CSS 例如：—ratios、widths、display type, etc— 但一般都是圍繞着 min-width 和 max-width 這二者。bootstrap

修改柵格系統中列的寬度
須要的時候, 用堆疊元素代替浮動
調整標題和文本的大小以便適合各類設備

謹慎的使用media queries，先從你的手機用戶開始吧。對於大型的項目, 應該考慮使用專門的代碼庫, 而不是構築在media queries之上。less

被支持的設備

Bootstrap 所支持的幾個media queries都放在了一個文件中，能夠讓你的項目更靈活的去適應不一樣設備和屏幕分辨率。包括：佈局

類型	佈局寬度	列寬	間隙寬度
大屏幕	大於等於1200px	70px	30px
默認	大於等於980px	60px	20px
平板	大於等於768px	42px	20px
手機到平板	小於等於767px	流式列，無固定寬度
手機	小於等於480px	流式列，無固定寬度

/* 大屏幕 */
@media (min-width: 1200px) { ... }
 
/* 平板電腦和小屏電腦之間的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* 橫向放置的手機和豎向放置的平板之間的分辨率 */
@media (max-width: 767px) { ... }
 
/* 橫向放置的手機及分辨率更小的設備 */
@media (max-width: 480px) { ... }

響應式佈局輔助class

爲了更快的針對移動設備作開發, 下面列出的輔助class用於針對不一樣設備顯示和隱藏內容。下表是可用的class列表, 以及它們在各個media query佈局下的效果。這些class能夠在 responsive.less 文件中找到。spa

Class	手機767px 及如下	平板979px 到 768px	電腦默認
`.visible-phone`	顯示	隱藏	隱藏
`.visible-tablet`	隱藏	顯示	隱藏
`.visible-desktop`	隱藏	隱藏	顯示
`.hidden-phone`	隱藏	顯示	顯示
`.hidden-tablet`	顯示	隱藏	顯示
`.hidden-desktop`	顯示	顯示	隱藏

相關標籤/搜索

每日一句

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