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 相关文章推荐
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
Html5 滚动穿透的方法
May 13 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
Aug 05 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 session常见问题集锦及解决办法总结
2007/03/18 PHP
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
Javascript的闭包
2009/12/31 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
python 获取文件列表(或是目录例表)
2009/03/25 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
django创建css文件夹的具体方法
2020/07/31 Python
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
财产公证书样本
2014/04/04 职场文书
房屋转让协议书范本
2014/04/11 职场文书
大学社团活动总结
2014/04/26 职场文书
集中采购方案
2014/06/10 职场文书
安全例会汇报材料
2014/08/23 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书