响应式布局网站页面@media 的使用方法

在页面开发中进行响应式网站开发的过程中使用media属性：

/**这是第一种写法**/
　　　　<style type="text/css">
		 *{margin:0px; padding:0px;}
		 body{background:url("img/bj.jpg") no-repeat fixed; background-size:cover;}
	　　@media  all  and ( min-width:980px) {    /**all 指所有的媒介上***/
		 .box{……}
	　　}
　　　　　　　@media  all  and (min-width:720px) and (max-width:980px)  { /*条件筛选 区域*/
		 .box{……}
	　　}
	　　@media  all  and (max-width:720px) {
		 .box{……}
	　　}
		.box nav a:nth-child(1){……}
	</style>

 

这是第二写法：(如果文件不是很大，最好不要使用这种方式)


<head>
　<link  rel='stylesheet' media="screen and (max-width:720px)" href="style.css"/>
  <link  rel='stylesheet' media="screen and (min-width:720px) and (max-width:980px)" href="style_720.css"/>
  <link  rel='stylesheet' media="screen and (max-width:980px)" href="style_980.css"/>
</head>

 

有时候我们见到和第一种一样的写法，就是没有all的值：

　@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; } .select{max-width:200px} }

这两种写法都一样，第二种写法可以更好的分开不同的CSS样式，单独加载。

posted on 2016-03-07 00:17  金甲  阅读(639)  评论(0)    收藏  举报

导航