利用@media screen響應式布局實現網頁布局的自適應

時間:2017/4/10 19:35:37,點擊:0

優點:無需插件和手機主題,對移動設備友好,能夠適應各種窗口大小。只需在CSS中添加@media screen屬性,根據瀏覽器寬度判斷并輸出不同的長寬值
1280分辨率以上(大于1200px)
@media screen and (min-width:1200px) {
#page {
width: 1100px;
}
#content,.div1 {
width: 730px;
}
#secondary {
width:310px
}
}

1100分辨率(大于960px,小于1199px)
@media screen and (min-width: 960px) and (max-width: 1199px) {
#page {
width: 960px;
}
#content,.div1 {
width: 650px;
}
#secondary {
width:250px
}
select {
max-width:200px
}
}

880分辨率(大于768px,小于959px)
@media screen and (min-width: 768px) and (max-width: 959px) {
#page {
width: 900px;
}
#content,.div1 {
width: 620px;
}
#secondary {
width:220px
}
select {
max-width:180px
}
}

720分辨率(大于480px,小于767px)
@media only screen and (min-width: 480px) and (max-width: 767px) {
#page {
width: 450px;
}
#content,.div1 {
width: 420px;
position: relative;
}
#secondary {
display:none
}
#access {
width: 450px;
}
#access a {
padding-right:5px
}
#access a img {
display:none
}
#rss {
display:none
}
#branding #s {
display:none
}
}

440分辨率以下(小于479px)
@media only screen and (max-width: 479px) {
#page {
width: 300px;
}
#content,.div1 {
width: 300px;
}
#secondary {
display:none
}
#access {
width: 330px;
}
#access a {
padding-right:10px;
padding-left:10px
}
#access a img {
display:none
}
#rss {
display:none
}
#branding #s {
display:none
}
#access ul ul a {
width:100px
}
}

打印 | 關閉

新疆18选7开奖公告 外汇蜡烛图基础知识 吉林十一选五走势图表双色 河北快三遗漏统计表大 100元分辨真假钱窍门 黑龙江体彩11选五完成 期货配资列入刑法 浙江11选五遗漏一定牛走势图 快乐10分官网 快三大小的判断方法 江苏快三查询走势图查询 明日股市行情大盘预测 安徽快3最新开奖号码 甘肃十一选五今天推荐 山西11选5任五遗漏 三码中特全免费公开 重庆彩票幸运农场走势图