css3的@media属性实现页面响应式布局示例代码

  发布时间:2014-02-10 15:53:52   作者:佚名   我要评论
使用css3的@media属性可以实现页面响应式布局,下面有个不错的示例,大家可以参考下
以最简单的header为例 直接上代码

复制代码
代码如下:

<!DOCTYPE HTML>
<head>
<script src="jquery-1.8.2.min.js"></script>
<style>

* {
margin:0;
padding:0;
}
.ul {
background-color:rgb(134, 170, 209);
height: 55px;
}
.ul li {
float:left;
list-style: none;
background-color:rgb(134, 170, 209);
width: 20%;
height: 100%;
}
.item {
display: block;
text-align:center;
line-height: 49px;
height: 100%;
transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari 和 Chrome */
-o-transition: all 0.5s;
cursor:pointer;
}
.item:hover {
background-color:rgb(168, 209, 253);

}
@media only screen and (max-width: 400px) {
.ul li {
width: 100%;
height: 100%;
}
}
</style>
<script>

</script>
</head>
<body class="sapUiBody">
<header>
<ul class="ul">
<li><a class="item">Home</a></li>
<li><a class="item">First</a></li>
<li><a class="item">Second</a></li>
<li><a class="item">Thirdly</a></li>
<li><a class="item">Fourth</a></li>
</ul>
</header>
</body>

注意的是@media属性必须写在下面,从而覆盖上面的css
 

相关文章

  • 详解使用CSS3的@media来编写响应式的页面

    这篇文章主要介绍了详解使用CSS3的@media来编写响应式的页面,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-01
  • css3 media 响应式布局的简单实例

    下面小编就为大家带来一篇css3 media 响应式布局的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-03
  • css3media响应式布局实例

    下面小编就为大家带来一篇css3media响应式布局实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-08
  • 详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)

    这篇文章主要介绍了详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的
    2020-11-16

最新评论