響應(yīng)式布局是css中常被提到的一個詞,而目前最流行的方式就是對于不同瀏覽器和設(shè)備的動態(tài)布局設(shè)計,他會根據(jù)不同瀏覽器和設(shè)備尺寸的變化動態(tài)地改變網(wǎng)頁的布局和內(nèi)容.
響應(yīng)式布局由三部分組成:流式布局,媒體查詢和靈活的媒體類型,今天主要學(xué)習(xí)媒體查詢.

媒體查詢

在樣式中加入媒體查詢的目的就是針對不同類型的媒體設(shè)備設(shè)置不同的樣式.

• 初始化媒體查詢
  就是以何種方式加入媒體查詢,有幾種方式,在此就說一種比較推薦的方式,在css樣式表中使用@media規(guī)則
  例如:
  @media screen and (max-width: 600px){...}
  上邊這一行代碼就初始化了媒體查詢,針對的是屏幕小于600px的媒體設(shè)置樣式.

媒體查詢中的邏輯運算符

and(與),not(非),only(唯一)
例如:
@media screen and (max-width: 600px) and (min-width: 200px){...}
@media not screen and (max-width: 600px) and (min-width: 200px){...}
@media only screen{...}
有了媒體查詢邏輯運算符,我們就可以靈活的組合媒體類型和設(shè)置條件.

媒體特性中的寬高

因為經(jīng)常要根據(jù)設(shè)備尺寸的不同進(jìn)行樣式設(shè)置,所以寬高用到的頻率是非常高的;
height,width,device-height,device-width,并且都可以以max或者min作為前綴.
上邊的代碼中已經(jīng)有用到過,在此不再舉例

媒體特性中的屏幕方向

橫屏就是寬大于高,豎屏就是高大于寬,這個在移動設(shè)備中應(yīng)用尤為廣泛.
orientation：portrait | landscape
portrait:豎屏
landscape:橫屏
@media all and (orientation: landscape) {...}

########媒體特性中的長寬比
min-device-pixel-ratio: width/height
例如:@media all and (min-device-pixel-ratio: 16/9) {...}

媒體特性中還有其他很多點,以上是平時比較常用的.