上門一對一計算機家教
當前位置: 首頁 > 課程信息 >

HTML5+CSS3移動手機網站建設家教

點擊: 時間:2014-11-25 來源:北京家教網
1. 響應式web設計 說到這個,移動開發面對的屏幕尺寸那叫一個豐富,其中安卓陣營就夠讓人頭痛的。我們在PC端常用的兩種布局方式就是固定布局和彈性布局,前者設置一個絕大多數電腦能正常顯示的固定寬度居中顯示,后者則采用百分比。關于

1. 響應式web設計

說到這個,移動開發面對的屏幕尺寸那叫一個豐富,其中安卓陣營就夠讓人頭痛的。我們在PC端常用的兩種布局方式就是固定布局和彈性布局,前者設置一個絕大多數電腦能正常顯示的固定寬度居中顯示,后者則采用百分比。關于這兩者討論的文章很多,有興趣的自己查閱下,我今天要介紹的就是相信你已經聽過的”響應式布局”,響應式布局意味著媒體查詢,這個在css2就已經出現的東西隨著html5、css3的到來又增添了新的生機。

響應式web設計并非新的技術,只不過將已有的開發技巧(彈性布局、彈性圖片和媒體查詢等)整合在了一起,并命了這個聽起來很牛X的名字——響應式web設計。猶如當年的Ajax一樣,將已有的技術重新組合發揮新的作用。

(1).媒體查詢初探。媒體查詢并非新出現的技術,如下:

 

 

其中就使用了媒體查詢,通過 標簽的media屬性為樣式表指定了設備類型,當然CSS3時代的媒體查詢更加豐富。

 

 

發現了他們的區別嗎?對,不只是針對設備進行適配,而且加了一個條件,就是當設備縱向放置的時候才匹配,咱們再看一個。

 

 

大家會發現我們又拓展了一個條件,對,就是當設備屏幕的寬度大于960px才會加載style.css樣式文件。我們究竟有哪些特性是可以被探測到的呢?下面列了一部分供大家參考(參考自http://www.w3.org/html/ig/zh/wiki/CSS3媒體查詢):

- width 視口寬度

- height 視口高度

- device-width 設備屏幕的寬度

- device-height 設備屏幕的高度

- orientation 檢測屏幕處于橫屏還是豎屏

- aspect-ratio 基于視口的寬高比例

- device-aspect-ratio 基于設備屏幕的寬高比

- color 顏色的位數,如min-color:32 匹配設備是否有32位或以上的顏色

- color-index 設備的顏色索引表中的顏色數

- monochrome 檢測單色振緩沖區中每像素使用的位數。為非負數,如monochrome:3

- resolution 檢測屏幕或打印機的分辨率,如min-resolution:300dpi(dpi后面會介紹),也可以是每厘米像素點的度量值,如min-resolution:120dpcm

- scan 掃描方式,值為progressive(逐行掃描)、interlace(隔行掃描)

- grid 檢測輸出設備是網格設備還是位圖設備

創建媒體查詢時,上述特性(scan和grid不行)都可以加上min和max前綴創建媒體查詢的范圍。除了link標簽能夠進行媒體查詢,是不是還有其它的呢,答案是Yes 。html中的meta標簽,此前我們常用的應該是這個

 

 

但是現在我們要說的不是這個,而是這個:

 

 

在多數ios和android設備的瀏覽器都支持viewport meta元素覆蓋默認的畫布縮放設置。在標簽中插入meta標簽,設置相應屬性即可,如上代碼,name=”viewport” content中width=device-width表示瀏覽器頁面寬度等于設備寬度(同理可以設置高度,也可指定具體值),initial-scale=1表示頁面不縮放保持,mininum-scale=1和maximum-scale=1表示允許用戶最小縮小至原大小和擴大到原大小(實際就是不讓縮放^^),user-scaleable=no 表示禁止縮放, target- densitydpi = high-dpi表示適配高分辨率的屏幕,還可以取值為dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi,后面的四個定性,第一個定量,即dpi_value是DPI值,device-dpi是使用設備原本的 dpi 作為目標 dp,不發生默認縮放,而后面的三個是指dpi取值在一定范圍的表示。這里我們先介紹前文出現過的一個名詞dpi,所表示的是每英寸所擁有的像素(pixel)數目,數值越高,即代表顯示屏能夠以越高的密度顯示圖像。當達到人眼的極限分辨率時,喬幫主給它取了一個很高端的名字——Retina。那么目前市面的手機分辨率是怎樣的一個分布呢,ios大家都知道的,從iphone4時代開始就已經是Retina屏了,至于Android可以看下此前Google官方公布的數據:

 

 

從上面可以看出,高分屏和超分屏已經是主流了,具體的適配范圍還是看各自的項目和定位吧。

講了這么多,有人可能會疑惑為什么這些都不是用在CSS中的?別急,慢慢來,現在就介紹如何在樣式中運用,按照上述屏幕分辨率的四種劃分,我們可以看到基本可以舍棄ldpi了。

/* 中分辨率屏幕 */

 

 

/*高分辨率屏幕*/

 

 

/*超高分辨率屏幕(傳說中的Retina屏)*/

 

 

上面就是在css中的用法,把我們需要的css代碼包含在大括號中就能用了,是不是很方便的樣子%>_

------分隔線----------------------------
30选5开奖查询