css响应式概念初识

媒体查询

需要加上视口

、

/*
	0-300px 
	301px-540px
	540px- 780px
*/
@media screen and (min-width:0px) and (max-width:300px){
    .box{
        background:red;
    }
}

最大宽度

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

最小宽度

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

多个媒体特性使用

Media Queries可以使用关键词"and"将多个媒体特性结合在一起。

@media screen and (min-width:0px) and (max-width:300px){
	.box{
		background: #00BFFF;
	}
}

断点

设计特点

百分比布局