媒體查詢---響應式設計小執行個體

最後更新：2015-03-17 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：html5+css3 媒體查詢響應式設計

眾所周知，隨著移動端高速發展，對於前端開發人員來說，HTML5+CSS3的地位越發的舉足輕重了。其中的響應式設計也真正的流行起來。可能此時小碼哥寫這篇文章來說，也已經有些晚了，但，鄙人的目的是方便自己以後翻閱的，當然，也希望能對看到該文章的人有所協助。什麼是響應式設計，什麼又是媒體查詢？

所謂響應式設計：就是依據不同的裝置尺寸來開發前端頁面，以保證頁面能在所想要的裝置上能正常顯示。

媒體查詢：就是HTML5中針對不同裝置設定的一些尺寸的區間範圍，依據不同的區間編寫不同的代碼。以適應不同的裝置。

經過小碼哥查閱：當今主流裝置解析度：240*320像素，320*480像素，480*800像素（居多），640*960像素（居多），480*854（9:16）像素（少），1280*720像素（多），1280*800像素，1920*1080像素以及現如今的什麼2k,4k等等。

下面是小碼哥，自己閑來無事做的一個三級響應式案例頁面，重點是媒體查詢：

代碼：

HTML部分：

<!doctype html>

<html>

<head>

<title>無標題文檔</title>

</head>

<body>

<a href="#" target="_blank" title="">歡迎光臨B2C100.COM 百裡挑一，獨一無二</a>

</div>

</section>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

</div>

</body>

</html>

CSS部分：

@charset "utf-8";

/* CSS Document*/

/**

* Author: zhaijiwei

* Version: 1.0

* Last Changed by ZhaiJiwei

* Last Update : 2015-03-13

body,h1,h2,h3,h4,h5,h6,blockquote,p,pre,

dl,dd,menu,ol,ul,

caption,th,td,

form,fieldset,legend,input,button,textarea,

header,footer,nav,article,aside,section,figure,figcaption{margin:0;padding:0}

h1,h2,h3,h4,h5,h6{font-size:100%}

menu,ol,ul{list-style:none}

table{border-collapse:collapse;border-spacing:0}

fieldset,img{border:0}

legend{display:none;}

a:active,a:focus{outline: none;}

address,cite,dfn,em,var{font-style:normal}

code,kbd,pre,samp{font-family:‘courier new‘,courier,monospace}

input,button,textarea,select{font-size:100%}

abbr[title]{border-bottom:1px dotted;cursor:help}

a{text-decoration:none;}

body,input,button,textarea,select,option,optgroup{font:12px/1 tahoma,\5b8b\4f53,sans-serif}

header,footer,nav,article,aside,section,figure,figcaption{display:block;}

.clear{zoom:1;}

.clear:after{visibility:hidden;display:block;font-size:0;content:"\0020";clear:both;height:0;}

/*S body*/

body{width:100%;height:100%;background:#CCFFFF;}

/*S conent*/

.content{width:100%;}

/*S #top*/

#top{width:100%;position:absolute;left:0;top:0;}

.top_bar{width:100%;height:40px;background:rgba(0,0,0,.5);line-height:40px;}

.top_bar a{margin-left:10px;color:#fff;}

/*S #main*/

.floatLeft{float:left;display:inline;}

#main{width:800px;height:600px;position:absolute;left:50%;top:50%;margin-left:-400px;margin-top:-300px;overflow:hidden;zoom:1;}

#main a{display:block;color:#fff;text-align:center;font-size:16px;}

.cont1{width:400px;}

.cont2,.cont3{width:200x;}

.cont1-1{overflow:hidden;zoom:1;}

.cont1-1-1{width:200px;height:300px;background:#666666;}

.cont1-1-1 a{width:200px;height:300px;line-height:300px;}

.cont1-1-2-1,.cont1-1-2-2{width:200px;height:150px;}

.cont1-1-2-1{background:#999999;}

.cont1-1-2-2{background:#CCCCCC;}

.cont1-1-2-1 a,.cont1-1-2-2 a{width:200px;height:150px;line-height:150px;}

.cont1-2-1{width:400px;height:150px;background:#FF0000;}

.cont1-2-1 a{width:400px;height:150px;line-height:150px;}

.cont1-2-2{overflow:hidden;zoom:1;}

.cont1-2-2-1,.cont1-2-2-2{width:200px;height:150px;}

.cont1-2-2-1{background:#00FF00;}

.cont1-2-2-2{background:#0000FF;}

.cont1-2-2-1 a,.cont1-2-2-2 a{width:200px;height:150px;line-height:150px;}

.cont2-1-1,.cont2-1-2,.cont2-2-1,.cont2-2-2{width:200px;height:150px;}

.cont2-1-1{background:#FFFF00;}

.cont2-1-2{background:#00FFFF;}

.cont2-2-1{background:#FF00FF;}

.cont2-2-2{background:#999999;}

.cont2-1-1 a,.cont2-1-2 a,.cont2-2-1 a,.cont2-2-2 a{width:200px;height:150px;line-height:150px;}

.cont3-1,.cont3-2{width:200px;height:300px;}

.cont3-1{background:#0000FF;}

.cont3-2{background:#666666;}

.cont3-1 a,.cont3-2 a{width:200px;height:300px;line-height:300px;}

/*螢幕尺寸小於768px的*/

@media (max-width:768px){

#main{width:600px;height:600px;margin-left:-300px;}

.cont1-1-1{width:200px;height:250px;}

.cont1-1-1 a{width:200px;height:250px;line-height:250px;}

.cont1-1-2-1,.cont1-1-2-2{width:200px;height:125px;}

.cont1-1-2-1 a,.cont1-1-2-2 a{width:200px;height:125px;line-height:125px;}

.cont1-2-1{width:400px;height:125px;}

.cont1-2-1 a{width:400px;height:125px;line-height:125px;}

.cont1-2-2-1,.cont1-2-2-2{width:200px;height:125px;}

.cont1-2-2-1 a,.cont1-2-2-2 a{width:200px;height:125px;line-height:125px;}

.cont2-1-1,.cont2-1-2,.cont2-2-1,.cont2-2-2{width:200px;height:125px;}

.cont3{float:none;overflow:hidden;zoom:1;width:600px;}

.cont3-1,.cont3-2{width:300px;height:100px;float:left;display:inline;}

.cont2-1-1 a,.cont2-1-2 a,.cont2-2-1 a,.cont2-2-2 a{width:200px;height:125px;line-height:125px;}

.cont3{float:none;overflow:hidden;zoom:1;width:600px;}

.cont3-1 a,.cont3-2 a{width:300px;height:100px;line-height:100px;}

}

/*螢幕尺寸小於480px的*/

@media (max-width:480px){

#top{display:none;}

#main{width:320px;height:560px;margin-left:-160px;margin-top:-280px;}

.cont1-1-1{width:160px;height:200px;}

.cont1-1-2-1,.cont1-1-2-2{width:160px;height:100px;}

.cont1-2-1{width:320px;height:100px;}

.cont1-2-2-1,.cont1-2-2-2{width:160px;height:100px;}

.cont1-1-1 a{width:160px;height:200px;line-height:200px;}

.cont1-1-2-1 a,.cont1-1-2-2 a{width:160px;height:100px;line-height:100px;}

.cont1-2-1 a{width:320px;height:100px;line-height:100px;}

.cont1-2-2-1 a,.cont1-2-2-2 a{width:160px;height:100px;line-height:100px;}

.cont2,.cont3{width:320px;overflow:hidden;zoom:1;}

.cont2-1-1,.cont2-1-2,.cont2-2-1,.cont2-2-2{width:80px;height:80px;float:left;display:inline;}

.cont3-1,.cont3-2{width:160px;height:80px;float:left;display:inline;}

.cont2-1-1 a,.cont2-1-2 a,.cont2-2-1 a,.cont2-2-2 a{width:80px;height:80px;line-height:80px;}

.cont3-1 a,.cont3-2 a{width:160px;height:80px;line-height:80px;}

}

以上三級轉換分別對應下面三種圖：

1、650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/5B/65/wKiom1UH0oDjoxxgAAD1qS_Q45c224.jpg" title="mtcx-1.jpg" alt="wKiom1UH0oDjoxxgAAD1qS_Q45c224.jpg" />

2、

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/5B/60/wKioL1UH08HgISStAADAz702lbA520.jpg" title="mtcx-2.jpg" alt="wKioL1UH08HgISStAADAz702lbA520.jpg" />

3、

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/5B/65/wKiom1UH0sDBP3glAAChTLe3dXg742.jpg" title="mtcx-3.jpg" alt="wKiom1UH0sDBP3glAAChTLe3dXg742.jpg" />

媒體查詢是當前非常流行的一種響應式設計方式。其核心還是要弄清楚每種裝置的尺寸問題，及布局問題。

本文出自 “關注技術專註前端” 部落格，請務必保留此出處http://oxoxo.blog.51cto.com/9301862/1621451

媒體查詢---響應式設計小執行個體

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

媒體查詢---響應式設計小執行個體

聯繫我們

熱門內容

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

媒體查詢---響應式設計小執行個體

聯繫我們

熱門內容

熱門主題

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support