CSS核心內容整理 - (下)

  前言

    總體來講CSS仍是比較容易掌握的,若是你願意話大量的時間去實踐,固然這更像是廢話.CSS中有不少細節的東西,沒有辦法一一拿出來講,因此在整個系列中我就挑出了我認爲最重要的CSS內容,所謂最重要就是最經常使用的.

  正文

    原本最後這一部分想總結一下UI組件以及響應式設計,後來想了想仍是決定把UI組件這一部分去掉了.由於如今大多數的平常應用中,對於UI組件咱們更多的是依賴於各個框架,好比Bootstrap.因此我感受看Bootstrap的源碼和Demo去了解UI組件更好,因此最後這一部分我想集中在響應式佈局上.

    CSS中有一項被稱爲"媒體查詢"的功能,能夠檢測出當前用戶的屏幕大小.而後根據這個大小,提供或者補充對應的CSS樣式以提供更好的體驗.

響應式設計三大要素

1. 媒體查詢 : 經過這種檢測屏幕大小的特性,爲不一樣大小的設備提供不一樣的CSS.
   

2. 流式佈局 : 使用em以及百分比而不是px進行寬度的控制,讓佈局可以隨屏幕設備大小而所發.

3. 彈性圖片 : 使用相對單位確保圖片的大小不會超出容器.
   

    1. 媒體查詢

    媒體查詢在使用中是包裹具體的CSS規則,做爲容器使用.即在某些條件下才會使其中的CSS生效.

@media print {
  nav {
    display: none;
  }
}

    當前頁面進行打印時,隱藏nav標籤的內容.經過將對應的CSS規則嵌套在@media中實現,可是媒體規則自己不支持嵌套.

@media screen and (max-width: 568px) {
  .column {
    float:left;
    width: 90%;
  }
}

    當頁面是經過屏幕顯示,且最大寬度不超過568px時,就會將column樣式的浮動設爲left,同時將寬度設置爲90%.

    簡單介紹一下媒體查詢的類型以及特性:

all : 匹配所有設備.

print : 分頁媒體以及打印模式.

screen: 匹配彩色計算機屏幕.

--------------------------------任意時刻應該只有一種設備類型--------------------------------

max-width 和 min-width : 匹配視窗的寬度,好比瀏覽器的寬度而不是屏幕寬度.

max-device-width 和 min-device-width : 匹配屏幕尺寸.

orientation : portrait || landscape : 匹配設備是橫屏仍是豎屏.

    經過@media可使用媒體查詢規則,另外一種方式則是使用<link>,尤爲是CSS規則不少的狀況下.

<link type="text/css" media="screen and (max-width:568px)" href="css/iphone_styles.css" />

    有時移動設備的瀏覽器可能會自動縮放網頁,形成咱們的媒體查詢失去所用,這時咱們要認爲的覆蓋這種特性,很簡單就能夠實現.

<meta name="viewport" content="width=device-width; maximumscale=1.0" />

    這個<meta>標籤告訴瀏覽器按照屏幕寬度來顯示網頁，不要縮小網頁。

    2. 使用百分比優化平板和手機的佈局

    不論是手機仍是平板,針對他們的佈局確定會和web桌面網站上的效果不同.響應式佈局的精髓就在於經過不一樣的CSS來調整同一個應用,使他不須要從新設計就能夠在多種設備上運行.

    因此對平板和手機的優化也須要media出力:

@media only screen and (max-width: 1000px) {
  // 平板
}

@media only screen and (max-width:640px) {
  // 手機
}

    在裏面將其中的頁面組成部分設置不一樣的百分比寬度,同時將水平的佈局儘量改成垂直佈局.大多數時候咱們要取消佈局中的浮動,由於再也不須要水平的結構,最重要的結構是上下佈局.

    若是有圖片爲它加上相似以下的樣式,防止它的大小超出容器.

img {max-width:100%;}

    這一部分的內容,可能相對來說比較空曠,坦白說若是我要作一個項目不會選擇本身寫這些,而是找一個響應式的CSS框架去完成,bootsrap或者jQuery Mobile均可以.以上的內容僅僅是掌握一個響應式設計的主旨,大致上全部的這些框架也是依據這些原則去實現的.