css3響應式佈局教程—css3響應式

 

響應式佈局

一個網站可以兼容多個終端，而且在各個終端均可以很好展現體驗。

媒體類型

在何種設備或者軟件上將頁面打開

1 2 3 4 5 6 7 8 9

all：全部媒體 braille：盲文觸覺設備 embossed：盲文打印機 print：手持設備 projection：打印機預覽 screen：彩屏設備 speech： '聽覺'相似的媒體類型 tty：不適用像素的設備 tv：電視

1 2 3 4 5 6 7 8 9 10 11 12 13

#box {width :100px ;height :100px ;background -color :red ; } @media embossed {      /*盲文打印機是綠色*/     #box {background -color :green ; } } @media tv {      /*在tv上是粉色*/     #box {background -color :pink ; } } @media all {      /*在全部媒體上是紅色*/     #box {background -color :red ; } }

關鍵字

and：鏈接媒體類型和媒體特性

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

@media all and  (min -width : 1201 ) {   }         not：關鍵字是用來排除某種制定的媒體類型 @media not tv         only：只有在特定的某種設備上識別 @media only tv         媒體特性         min -width：當屏幕大小 大於等於 某個值的時候識別          max -width：當屏幕大小 小於等於 某個值的時候識別         orientation：橫豎屏（portrait /landscape） @media  (orientation :portrait )  {  //豎屏的時候     div { background -color : yellow ;  } } @media  (orientation :landscape )  {  //橫屏的時候     div { background -color : green ;  } }

豎屏/橫屏檢測的原理是經過可視區的寬度和高度之間的比例進行檢測的。但在移動端中可能會出現問題，好比點擊一個文本輸入框的時候，會彈出鍵盤，這個鍵盤會影響屏幕但是區域的寬高，這種狀況會形成豎屏/橫屏檢測錯誤。

樣式引入方式

樣式表末尾添加

1	@media all and  (min -width :600px ) {   }

link標籤

1	<link rel = 'stylesheet' href = 'css/01.css' media = 'all and (min-width:600px)'   />

寫在樣式表頭部

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<style >      @ import url (01. css )  (min -width :400px ) ;      @ import url (02. css )  (min -width :600px ) ;      @ import url (03. css )  (min -width :800px ) ;      @ import url (04. css )  (min -width :1000px ) ;     body {         margin :  0 ;      }     div {         height : 100px ;         background -color : #f00 ;         border : 1px solid #000 ;         box -sizing : border -box ;          float : left ;      } </style >

https://www.w3.org/2010/05/video/mediaevents.html

經常使用的幾種屏幕寬度設定：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

@media screen and  (min -width : 1200px )  {     css -code ; } @media screen and (min -width : 960px ) and  (max -width : 1199px )  {     css -code ; } @media screen and (min -width : 768px ) and  (max -width : 959px )  {     css -code ; } @media screen and (min -width : 480px ) and  (max -width : 767px )  {     css -code ; } @media screen and  (max -width : 479px )  {     css -code ; }