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 相关文章推荐
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 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新建类问题分析及解决思路
2015/11/19 PHP
PHP引用的调用方法分析
2016/04/25 PHP
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
django中的setting最佳配置小结
2017/11/21 Python
python实现屏保计时器的示例代码
2018/08/08 Python
python实现梯度下降法
2020/03/24 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
卫校中专生个人自我评价
2013/09/19 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
培训讲师开场白
2015/06/01 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript