在页面开发中进行响应式网站开发的过程中使用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样式,单独加载。
原文:http://www.cnblogs.com/swl267/p/5249152.html