css3关于@media screen 的使用

发布时间:2017-02-17 浏览次数:4915 文章来源:个人博客

众所周知,电脑屏幕的分辨率大小不一,这样给前端布局带来了很大的麻烦,尤其是对于一下过小的屏幕。怎么解决呢?


使用百分百的方式实现会有很大的局限性,比如当过小时,文字重合等等,此时,可以用CSS3的media screen来解决问题。


@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。


例如:

@media screen and (min-height:100px){
    .view-content-left{
        width:80px;
    }
}

@media screen and (min-height:960px){
    .view-content-left{
        width:100px;
    }
}

以上例子可以看出,当屏幕高度大于100px,并且小于960px的时候,会使用width:80px这个样式。而当屏幕大于960px的时候,会使用width:100px;这个样式。


所以,使用media screen来判断分辨率进而使用不同的样式布局页面,使得页面保持整洁大方。



另外,需要注意的是:


如果上面的顺序颠倒:

@media screen and (min-height:960px){
    .view-content-left{
        width:100px;
    }
}

@media screen and (min-height:100px){
    .view-content-left{
        width:80px;
    }
}


那么,即使分辨率大于960px也是执行width:80这个样式的,因为大于960的同时,也满足大于100,因此按顺序执行,最终会是width:80px,这个需要注意的,避免的方式有很多,如按第一种的顺序,或者加上max-height这个条件。


ps:你也可以针对不同的媒体使用不同 stylesheets

<link rel="stylesheet" media="mediatype and|not|only (media 
	feature)" 
	href="mystylesheet.css">


key-word
CSS3 CSS3 media @media screen CSS3 分辨率