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

以最简单的header为例 直接上代码

复制代码代码如下:

* {

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%;

}

}

• Home
• First
• Second
• Thirdly
• Fourth

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