利用@media screen实现网页布局的自适应

经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应。

      优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小,只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值。

      以下是针对自用主题而写的css,对宽度768以下设备只保留主要文章框架,以便在有限的空间里获得最佳阅读体验。


@media screen and(min-width:1200px) {

#page {

width: 1100px;

}

#content,.div1 {

width: 730px;

}

#secondary {

width: 310px

}

}


@media screen and(min-width:960px)and(max-width:1199px) {

#page {

width: 960px;

}

#content,.div1 {

width: 650px;

}

#secondary {

width: 250px

}

select {

max-width: 200px

}

}


@media screen and(min-width:768px)and(max-width:959px) {

#page {

width: 900px;

}

#content,.div1 {

width: 620px;

}

#secondary {

width: 220px

}

select {

max-width: 180px

}

}


@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;

}

#accessa {

padding-right: 5px

}

#accessaimg {

display: none

}

#rss {

display: none

}

#branding#s {

display: none

}

}


@media only screen and(max-width:479px) {

#page {

width: 300px;

}

#content,.div1 {

width: 300px;

}

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值