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实现阅读进度条
Feb 27 HTML / CSS
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
css3的transition属性详解
Dec 15 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
详解CSS玩转图片Base64编码
May 25 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之第一天
2006/10/09 PHP
php木马攻击防御之道
2008/03/24 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
服务器安全设置的几个注册表设置
2007/07/28 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
Javascript Objects详解
2014/09/04 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
办公室助理岗位职责
2013/12/25 职场文书
学校招生宣传广告词
2014/03/19 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
高中运动会广播稿
2014/09/16 职场文书
运动会广播稿200字
2014/10/18 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python