关于@media

来源:互联网 发布:ipad淘宝横屏版 编辑:程序博客网 时间:2024/05/21 10:12

将website里首页适配,原网页不能自如的伸缩,且不能在手机上很好的浏览。

1.小于960px的尺寸的写法:@media screen and (max-width:960px){

body{

background:#000;

}

}

是media的标准写法,当页面小于960px时,执行下面的css

2.等于960px尺寸的写法:@media screen and(max-device-width:960px){

body{

      background:red;

     }

}

当页面等于960px时,执行下面的css

3.大于960px尺寸的写法:@media screen  and(min-width:960px){

Body{

      Background:orange;

    }

}

当页面大于960px时,执行下面的css

4.混合使用上面的用法:@media screen and(min-width:960px)and(max-width:1200px){

body{

  Background:#000;

}

}

当页面宽度大于960px小于1200px的时候执行下面的css

0 0
原创粉丝点击