css3中media響應(yīng)式布局的示例分析

這篇文章主要介紹了css3中media響應(yīng)式布局的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

裕華ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

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

  
  
      
          
          
      
      
      
        小于200px背景變紅色大于300px背景為黃色
  
      

代碼的效果

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

  
  
      
          
          
      
      
      
        200px以上并且500px以下背景變成紅色
  
      

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

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

自己隨便做的一個(gè)頁面這是在450px以上的頁面效果

這是450px以下的頁面效果

總體做法就是將每一塊div響應(yīng)式縮到450px以下的時(shí)候每個(gè)div的寬度為100%

高度為auto，我在寫這個(gè)網(wǎng)頁的時(shí)候遇到一個(gè)小小的問題,做到頁面底部的時(shí)候底部導(dǎo)航飛了,它沒有安安分分的落在底部而是在中間,我在這里分享一下小小的知識(shí)點(diǎn)那就是我最后的解決方法,只需要給底部的div一個(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ì)可能就悄悄的來到你的身邊呢

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css3中media響應(yīng)式布局的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

當(dāng)前標(biāo)題：css3中media響應(yīng)式布局的示例分析
網(wǎng)頁鏈接：http://m.jiaotiyi.com/article/pghsjo.html