响应式布局Demo
顧名思義,響應(yīng)式布局就是為適應(yīng)不同終端而形成的一種技術(shù)。我總結(jié)了一個簡單的例子幫助大家了解和學習響應(yīng)式布局。
實現(xiàn)響應(yīng)式布局的幾種方式:媒體查詢、JS、流體布局、彈性布局…
常用的meta標簽
<meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"name="viewport" />注:強制讓文檔的寬度與設(shè)備的寬度保持1:1,并且文檔最大的寬度比例是1.0,且不允許用戶點擊屏幕放大瀏覽;
<meta content="yes" name="apple-mobile-web-app-capable" />注:iphone設(shè)備中的safari私有meta標簽,它表示:允許全屏模式瀏覽;
<meta content="black" name="apple-mobile-web-app-status-bar-style" />注:iphone的私有標簽,它指定的iphone中safari頂端的狀態(tài)條的樣式;
<meta content="telephone=no" name="format-detection" />注:讓用戶不允許對屏幕進行拉伸。
使用媒體查詢的三種方式
1、直接在CSS中使用
@media 類型(常選all/screen) and(條件1) and(條件2){CSS選擇器{CSS屬性:屬性值;} }2、使用link鏈接CSS,media屬性可以設(shè)置媒體查詢方式 (常用)
eg. <link rel="stylesheet" type="text/css" href="css/02-響應(yīng)式布局.css" media="all and (max-width:800px)"/>3、使用Import導入,直接在url( )后面空格,間接媒體查詢方式
eg. @import url("css/XXX.css") all and (max-width:800px); 條件符合后在鏈接CSS文件響應(yīng)式Demo — HTML部分
首先,新建一個HTML 文件,命名Demo.html. 接著,新建一個CSS文件,文件名與HTML文件相同,Demo.css在HTML文件,head標簽中引入viewport視口功能,如下:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />這是移動開發(fā)過程中必要語句
接著,將HTML文件與CSS文件關(guān)聯(lián) :<link rel="stylesheet" type="text/css" href="css/Demo.css"/>
在HTML文件,body標簽中寫入結(jié)構(gòu)語句:
<body> <header id="header"><ul><li>header1</li><li>header2</li><li>header3</li><li>header4</li><li>header5</li></ul><div>icon </div></header><section id="main"><div class="left">left</div><div class="center">center</div><div class="right">right</div></section><footer id="foot">footer</footer></body>響應(yīng)式Demo — css部分
PC端效果如下所示,顯示header1-5導航欄,隱藏右上角小div:
我們要在CSS文件中寫入PC端的CSS樣式,在PC端的基礎(chǔ)上進行pad、手機端的更改,代碼如下:
接下來,我們進行響應(yīng)式的設(shè)置,在CSS中引入媒體查詢。
Pad端(假設(shè)屏幕最大寬度900px)效果如下所示,主體右端隱藏,其它部分正常顯示。
CSS樣式如下:
手機端(假設(shè)最大寬度550px)效果如下所示,header1-5導航欄隱藏,右側(cè)小div顯示,主體部分的左中右改為上中下顯示。
CSS代碼如下:
看到這里,響應(yīng)式已經(jīng)介紹完了,點贊關(guān)注喲!!!
總結(jié)
- 上一篇: Spring AOP是什么?
- 下一篇: Jsoup解析HTML字符串