用CSS實現響應式布局
響應式布局感覺很高大上,很難,但實際上只用CSS也能實現響應式布局
要用的就是CSS中的沒接查詢,下面就介紹一下怎么運用:
@media 類型 and (條件1) and (條件二){ css樣式 } @media screen and (max-width:1024px) { body{ background-color: red; } }2.使用@import導入
@import url("css/moxie.css") all and (max-width:980px);
3.也是最常用的方法--直接使用link連接,media屬性用于設置查詢方法
下面是一個簡單的響應式的布局HTMl代碼:
響應式 頭部左邊中間右邊
下面是CSS樣式:
*{ margin:0; padding:0; text-align:center; color:yellow; } .header{ width:100%; height:100px; background:#ccc; line-height:100px; } .main{ background:green; width:100%; } .clearfix:after{ display:block; height:0; content:""; visibility:hidden; clear:both; } .left,.center,.right{ float:left; } .left{ width:20%; background:#112993; height:300px; font-size:50px; line-height:300px; } .center{ width:60%; background:#ff0; height:400px; color:#fff; font-size:50px; line-height:400px; } .right{ width:20%; background:#f0f; height:300px; font-size:50px; line-height:300px; } .footer{ width:100%; height:50px; background:#000; line-height:50px; }
樣式代碼
.right{ float:none; width:100%; background:#f0f; clear:both; } .left{ width:30%; } .center{ width:70%; } .main{ height:800px; }
樣式代碼
.left,.center,.right{ float:none; width:100%; }當窗口大于1024px 時,指揮被壓縮,并不會發生其他變化: 當窗口小于1024px,大于720px的時候,右側欄取消浮動,在下邊顯示: 當窗口小于720px的時候,左中右三欄,全都取消浮動,寬度100%: 好了,布局就這么簡單,細節的把握還靠不斷地練習。 持續更新,歡迎大家指教
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52699.html
摘要:繼續響應式網頁布局的實現,今日講的是方案。就是為二維布局設計的,最適合用來做網頁布局。其中是最小寬度單位,等于六個等于三個等于兩個而則等于五個。 繼續W3Schools響應式網頁布局的實現,今日講的是CSS Grid方案。CSS Grid就是為二維布局設計的,最適合用來做網頁布局。目前主流的瀏覽器都已經支持CSS Grid,除非你很確定你的用戶常使用較舊的瀏覽器,不然的話,建議使用CS...
摘要:繼續響應式網頁布局的實現,今日講的是方案。就是為二維布局設計的,最適合用來做網頁布局。其中是最小寬度單位,等于六個等于三個等于兩個而則等于五個。 繼續W3Schools響應式網頁布局的實現,今日講的是CSS Grid方案。CSS Grid就是為二維布局設計的,最適合用來做網頁布局。目前主流的瀏覽器都已經支持CSS Grid,除非你很確定你的用戶常使用較舊的瀏覽器,不然的話,建議使用CS...
用CSS實現響應式布局 響應式布局感覺很高大上,很難,但實際上只用CSS也能實現響應式布局要用的就是CSS中的沒接查詢,下面就介紹一下怎么運用: 使用@media 的三種方法 1.直接在CSS文件中使用: @media 類型 and (條件1) and (條件二){ css樣式 } @media screen and (max-width:1024px) { body{ ...
閱讀 3564·2021-11-16 11:45
閱讀 2099·2021-11-08 13:23
閱讀 2212·2021-10-11 10:59
閱讀 2892·2021-09-27 13:36
閱讀 2481·2019-08-30 15:54
閱讀 2669·2019-08-29 16:58
閱讀 2783·2019-08-29 16:56
閱讀 1343·2019-08-26 13:52