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


Posted in HTML / CSS onFebruary 10, 2014

以最简单的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属性实现页面响应式布局示例代码
HTML / CSS 相关文章推荐
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 #HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 #HTML / CSS
css3教程之倾斜页面
Jan 27 #HTML / CSS
使用css3制作动感导航条示例
Jan 26 #HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 #HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 #HTML / CSS
css图标制作教程制作云图标
Jan 19 #HTML / CSS
You might like
php 中文和编码判断代码
2010/05/16 PHP
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
JS event使用方法详解
2008/04/28 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
javascript基础知识
2016/06/07 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
英语专业毕业个人求职自荐信
2013/09/21 职场文书
毕业生自我鉴定
2013/11/05 职场文书
自主实习接收函
2014/01/13 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
艺术节主持词
2014/04/02 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
公司给客户的感谢信
2015/01/23 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
杨善洲观后感
2015/06/04 职场文书
民主生活会意见
2015/06/05 职场文书
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL