首页 > Web开发 > 详细

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

时间:2016-03-07 01:24:20      阅读:210      评论:0      收藏:0      [点我收藏+]

在页面开发中进行响应式网站开发的过程中使用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样式,单独加载。

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

原文:http://www.cnblogs.com/swl267/p/5249152.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!