1. 程式人生 > >實現網頁佈局的自適應

實現網頁佈局的自適應

http://www.5imoban.net/jiaocheng/div+css/2014/0311/312.html

例項講解@media screen and:http://www.webkaka.com/tutorial/zhanzhang/2015/090643/

開始研究響應式web設計,CSS3 Media Queries是入門。

Media Queries,其作用就是允許新增表示式用以確定媒體的環境情況,以此來應用不同的樣式表。換句話說,其允許我們在不改變內容的情況下,改變頁面的佈局以精確適應不同的裝置。
那麼,Media Queries是如何工作的?
兩種方式:

一種是直接在link中判斷裝置的尺寸,然後引用不同的css檔案:

1 <linkrel="stylesheet"type="text/css"href="styleA.css"media="screen and (min-width: 400px)">
意思是當螢幕的寬度大於等於400px的時候,應用styleA.css
在media屬性裡:
  • screen 是媒體型別裡的一種,CSS2.1定義了10種媒體型別
  • and 被稱為關鍵字,其他關鍵字還包括 not(排除某種裝置),only(限定某種裝置)
  • (min-width: 400px) 就是媒體特性,其被放置在一對圓括號中。
1 <linkrel="stylesheet"type="text/css"
href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
意思是當螢幕的寬度大於600小於800時,應用styleB.css

另一種方式,即是直接寫在<style>標籤裡:

1 @media screen and(max-width: 600px) { /*當螢幕尺寸小於600px時,應用下面的CSS樣式*/
2 .class {
3 background: #ccc;
4 }
5 }

寫法是前面加@media,其它跟link裡的media屬性相同。
其實基本上就是樣式覆蓋~,判斷裝置,然後引用不同的樣式檔案覆蓋。
要注意的是由於網頁會根據螢幕寬度調整佈局,所以不能使用絕對寬度的佈局,也不能使用具有絕對寬度的元素。這一條非常重要,否則會出現橫向滾動條。

補充:media query中的not only all等關鍵字
not: not是用來排除掉某些特定的裝置的,比如 @media not print(非列印裝置)
only: 用來定某種特別的媒體型別。對於支援Media Queries的移動裝置來說,如果存在only關鍵字,移動裝置的Web瀏覽器會忽略only關鍵字並直接根據後面的表示式應用樣式檔案。對於不支援Media Queries的裝置但能夠讀取Media Type型別的Web瀏覽器,遇到only關鍵字時會忽略這個樣式檔案。
all: 所有裝置,這個應該經常看到
還有其它一些:

media_type

裝置型別說明

all

所有裝置

aural

聽覺裝置

braille

點字觸覺裝置

handled

便攜裝置,如手機、平板電腦

print

列印預覽圖等

projection

投影裝置

screen

顯示器、筆記本、移動端等裝置

tty

如打字機或終端等裝置

tv

電視機等裝置型別

embossed

盲文印表機


以下是demo

一個三欄佈局的,在不同的尺寸下,變為兩欄,再變為一欄


程式碼如下:
檢視程式碼列印?
01 <!DOCTYPE HTML>
02 <html>
03 <head>
04 <metacharset="utf-8">
05 <metaname="viewport"content="width=device-width, initial-scale=1"/>
06 <title>css3-media-queries-demo</title>
07 <style>
08 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
09 padding: 0;
10 margin: 0;
11 }
12 .content{
13 zoom:1;
14 }
15 .content:after{
16 content: ".";
17 display: block;
18 height: 0;
19 clear: both;
20 visibility: hidden;
21 }
22 .leftBox, .rightBox{
23 float: left;
24 width: 20%;
25 height: 500px;
26 margin: 5px;
27 background: #ffccf7;
28 display: inline;
29 -webkit-transition: width 1s ease;
30 -moz-transition: width 1s ease;
31 -o-transition: width 1s ease;
32 -ms-transition: width 2s ease;
33 transition: width 1s ease;
34 }
35 .middleBox{
36 float: left;
37 width: 50%;
38 height: 800px;
39 margin: 5px;
40 background: #b1fffc;
41 display: inline;
42 -webkit-transition: width 1s ease;
43 -moz-transition: width 1s ease;
44 -o-transition: width 1s ease;
45 -ms-transition: width 1s ease;
46 transition: width 1s ease;
47 }
48 .rightBox{
49 background: #fffab1;
50 }
51 @media only screen and (min-width: 1024px){
52 .content{
53 width: 1000px;
54 margin: auto
55 }
56 }
57 @media only screen and (min-width: 400px) and (max-width: 1024px){
58 .rightBox{
59 width: 0;
60 }
61 .leftBox{ width: 30%}
62 .middleBox{ width: 65%}
63 }
64 @media only screen and (max-width: 400px){
65 .leftBox, .rightBox, .middleBox{
66 width: 98%;
67 height: 200px;
68 }
69 }
70 </style>
71 </head>
72
73 <body>
74 <div class="content">
75 <divclass="leftBox"></div>
76 <divclass="middleBox"></div>
77 <divclass="rightBox"></div>
78 </div>
79 </body>
80 </html>