css3media響應(yīng)式布局實(shí)例分析

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 18:52:51

css3media響應(yīng)式布局實(shí)例分析

css3media響應(yīng)式布局實(shí)例分析:響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，而且隨著目前大屏幕移動(dòng)設(shè)備的普及，用"大勢(shì)所趨"來(lái)形容也不為過(guò)。隨著越來(lái)越多的設(shè)計(jì)師采用這個(gè)技術(shù)，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式。隨著技術(shù)的發(fā)展css

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀css3media響應(yīng)式布局實(shí)例分析:響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，而且隨著目前大屏幕移動(dòng)設(shè)備的普及，用"大勢(shì)所趨"來(lái)形容也不為過(guò)。隨著越來(lái)越多的設(shè)計(jì)師采用這個(gè)技術(shù)，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式。隨著技術(shù)的發(fā)展css

響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，而且隨著目前大屏幕移動(dòng)設(shè)備的普及，用"大勢(shì)所趨"來(lái)形容也不為過(guò)。隨著越來(lái)越多的設(shè)計(jì)師采用這個(gè)技術(shù)，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式。隨著技術(shù)的發(fā)展css3的特性也被廣泛應(yīng)用開(kāi)來(lái),它的很多新標(biāo)簽也非常好用而且非常容易學(xué)習(xí),就像css3的響應(yīng)式布局也是非常6的,原本只能在pc端顯示的網(wǎng)頁(yè)現(xiàn)在可以通過(guò)@media的加入就可以把一個(gè)網(wǎng)頁(yè)變成響應(yīng)式了,pc端也可以移動(dòng)端也可以真是伸縮自如啊,例如呢

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <style>
/* 小于200px*/ 
 @media only screen and (max-width:200px ) { 
 #p{ 
 background: red; 
 } 
 } 
/* 大于300px*/ 
 @media only screen and (min-width:300px ) { 
 #p{ 
 background: yellow; 
 } 
 } 

 </style>
 <body>
 <p id="p">小于200px背景變紅色大于300px背景為黃色</p>
 </body>
</html>

這段代碼的效果 css3media響應(yīng)式布局實(shí)例分析

@media可以用于單條件也可以用于雙條件例如：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <style>
/* 小于200px*/ 
 @media (min-width:200px ) and (max-width:500px ) { 
 #p{ 
 background: red; 
 } 
 } 
 </style>
 <body>
 <p id="p">200px以上并且500px以下背景變成紅色</p>
 </body>
</html>

這段代碼小于200px或者大于500px不顯示效果

簡(jiǎn)單的一個(gè)@media就實(shí)現(xiàn)了響應(yīng)式頁(yè)面,是不是非常easy，

自己隨便做的一個(gè)頁(yè)面這是在450px以上的頁(yè)面效果 css3media響應(yīng)式布局實(shí)例分析

這是450px以下的頁(yè)面效果 css3media響應(yīng)式布局實(shí)例分析總體做法就是將每一塊p響應(yīng)式縮到450px以下的時(shí)候每個(gè)p的寬度為100%

高度為auto，我在寫這個(gè)網(wǎng)頁(yè)的時(shí)候遇到一個(gè)小小的問(wèn)題,做到頁(yè)面底部的時(shí)候底部導(dǎo)航飛了,它沒(méi)有安安分分的落在底部而是在中間,我在這里分享一下小小的知識(shí)點(diǎn)那就是我最后的解決方法,只需要給底部的p一個(gè)style樣式 clear：both這樣底部就會(huì)安安分分的固定到下面了,在media里還會(huì)有橫屏和豎屏的響應(yīng)式,豎屏為@media（orientation:portrait）

豎屏為@media(orientation:landscape)這樣就可以適配橫屏和豎屏了，media的優(yōu)勢(shì)非常多例如我們?cè)趧?chuàng)建自己的簡(jiǎn)歷的時(shí)候可以利用響應(yīng)式布局這樣我們的機(jī)會(huì)豈不是大了很多,HR也有可能會(huì)在手機(jī)上看到你的簡(jiǎn)歷這個(gè)時(shí)候機(jī)會(huì)可能就悄悄的來(lái)到你的身邊呢

以上這篇css3media響應(yīng)式布局實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持PHP中文網(wǎng)。

更多css3media響應(yīng)式布局實(shí)例分析相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

css3media響應(yīng)式布局實(shí)例分析

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：實(shí)例 media css3

熱門焦點(diǎn)

css3media響應(yīng)式布局實(shí)例分析

css3media響應(yīng)式布局實(shí)例分析

css3media響應(yīng)式布局實(shí)例分析

最新推薦

猜你喜歡

熱門推薦