左邊
中間
右邊
資訊專欄INFORMATION COLUMN
用CSS實(shí)現(xiàn)響應(yīng)式布局
響應(yīng)式布局感覺很高大上，很難，但實(shí)際上只用CSS也能實(shí)現(xiàn)響應(yīng)式布局
要用的就是CSS中的沒接查詢，下面就介紹一下怎么運(yùn)用：
@media 類型 and (條件1) and (條件二){
css樣式
}
@media screen and (max-width:1024px) {
body{
background-color: red;
}
}
2.使用@import導(dǎo)入
@import url("css/moxie.css") all and (max-width:980px);
3.也是最常用的方法--直接使用link連接，media屬性用于設(shè)置查詢方法
下面是一個簡單的響應(yīng)式的布局HTMl代碼：
響應(yīng)式
頭部
左邊
中間
右邊
下面是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%;
}
當(dāng)窗口大于1024px 時，指揮被壓縮，并不會發(fā)生其他變化：
當(dāng)窗口小于1024px，大于720px的時候，右側(cè)欄取消浮動，在下邊顯示：
當(dāng)窗口小于720px的時候，左中右三欄，全都取消浮動，寬度100%：
好了，布局就這么簡單，細(xì)節(jié)的把握還靠不斷地練習(xí)。
持續(xù)更新，歡迎大家指教
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113535.html
摘要：響應(yīng)式布局的概念響應(yīng)式布局，即，在實(shí)現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式。框架實(shí)現(xiàn)響應(yīng)式布局利用中柵格系統(tǒng)可以簡單實(shí)現(xiàn)響應(yīng)式布局，這里就需要去理解一下啥是柵格系統(tǒng)代表在端上顯示在一行的個柵欄，也就是一半。 響應(yīng)式布局的概念 響應(yīng)式布局，即 Responsive design，在實(shí)現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式。通過響應(yīng)式設(shè)計(jì)能使網(wǎng)站在手機(jī)和平板電腦上有更好的瀏...
摘要：繼續(xù)響應(yīng)式網(wǎng)頁布局的實(shí)現(xiàn)，今日講的是方案。就是為二維布局設(shè)計(jì)的，最適合用來做網(wǎng)頁布局。其中是最小寬度單位，等于六個等于三個等于兩個而則等于五個。 繼續(xù)W3Schools響應(yīng)式網(wǎng)頁布局的實(shí)現(xiàn)，今日講的是CSS Grid方案。CSS Grid就是為二維布局設(shè)計(jì)的，最適合用來做網(wǎng)頁布局。目前主流的瀏覽器都已經(jīng)支持CSS Grid，除非你很確定你的用戶常使用較舊的瀏覽器，不然的話，建議使用CS...
摘要：繼續(xù)響應(yīng)式網(wǎng)頁布局的實(shí)現(xiàn)，今日講的是方案。就是為二維布局設(shè)計(jì)的，最適合用來做網(wǎng)頁布局。其中是最小寬度單位，等于六個等于三個等于兩個而則等于五個。 繼續(xù)W3Schools響應(yīng)式網(wǎng)頁布局的實(shí)現(xiàn)，今日講的是CSS Grid方案。CSS Grid就是為二維布局設(shè)計(jì)的，最適合用來做網(wǎng)頁布局。目前主流的瀏覽器都已經(jīng)支持CSS Grid，除非你很確定你的用戶常使用較舊的瀏覽器，不然的話，建議使用CS...
閱讀 1472·2021-09-30 09:57
閱讀 1481·2021-09-09 09:33
閱讀 2249·2021-09-04 16:40
閱讀 1812·2021-09-01 10:50
閱讀 3259·2021-09-01 10:31
閱讀 2552·2019-08-30 15:56
閱讀 2983·2019-08-30 15:44
閱讀 3486·2019-08-29 17:29
