bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

媒體查詢---響應式設計小實例

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

成都創新互聯專注于企業營銷型網站建設、網站重做改版、新洲網站定制設計、自適應品牌網站建設、H5響應式網站商城系統網站開發、集團公司官網建設、成都外貿網站建設、高端網站制作、響應式網頁設計等建站業務,價格優惠性價比高,為新洲等各大城市提供網站開發制作服務。

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

媒體查詢:就是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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>

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

<link href="css/style.css" rel="stylesheet" type="text/css"/>

</head>

<body>

<div class="content">

<section id="top">

<div class="top_bar">

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

</div>

</section>

<section id="main">

<div class="cont1 floatLeft">

<div class="cont1-1">

<div class="cont1-1-1 floatLeft"><a href="#" target="_blank" title="首頁">首頁</a></div>

<div class="cont1-1-2 floatLeft">

<div class="cont1-1-2-1"><a href="#" target="_blank" title="瓷器">瓷器</a></div>

<div class="cont1-1-2-2"><a href="#" target="_blank" title="石器">石器</a></div>

</div>

</div><!--cont1-1-->

<div class="cont1-2">

<div class="cont1-2-1"><a href="#" target="_blank" title="木器">木器</a></div>

<div class="cont1-2-2">

<div class="cont1-2-2-1 floatLeft"><a href="#" target="_blank" title="剪紙">剪紙</a></div>

<div class="cont1-2-2-2 floatLeft"><a href="#" target="_blank" title="布藝">布藝</a></div>

</div>

</div><!--cont1-2-->

</div><!--cont1-->

<div class="cont2 floatLeft">

<div class="cont2-1">

<div class="cont2-1-1"><a href="#" target="_blank" title="DIY">DIY</a></div>

<div class="cont2-1-2"><a href="#" target="_blank" title="古玩文玩">古玩文玩</a></div>

</div>

<div class="cont2-2">

<div class="cont2-2-1"><a href="#" target="_blank" title="五行綜合">五行綜合</a></div>

<div class="cont2-2-2"><a href="#" target="_blank" title="新聞">新聞</a></div>

</div>

</div><!--cont2-->

<div class="cont3 floatLeft">

<div class="cont3-1"><a href="#" target="_blank" title="廣告一">廣告一</a></div>

<div class="cont3-2"><a href="#" target="_blank" title="廣告二">廣告二</a></div>

</div><!--cont3-->

</section>

</div><!--content-->

</body>

</html>

CSS部分:

@charset "utf-8";

/* CSS Document*/

/**

* Author: zhaijiwei

* Version: 1.0

* Last Changed by ZhaiJiwei

* Last Update : 2015-03-13

*/

body,h2,h3,h4,h5,h6,h7,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}

h2,h3,h4,h5,h6,h7{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、媒體查詢---響應式設計小實例

2、

媒體查詢---響應式設計小實例

3、

媒體查詢---響應式設計小實例

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

當前題目:媒體查詢---響應式設計小實例
新聞來源:http://vcdvsql.cn/article20/peheco.html

成都網站建設公司_創新互聯,為您提供搜索引擎優化品牌網站設計企業建站標簽優化ChatGPT響應式網站

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

網站托管運營