众所周知，电脑屏幕的分辨率大小不一，这样给前端布局带来了很大的麻烦，尤其是对于一下过小的屏幕。怎么解决呢？
使用百分百的方式实现会有很大的局限性，比如当过小时，文字重合等等，此时，可以用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">