css3响应式布局
2015-10-10 10:55
639 查看
响应式布局
分栏布局,-webkit-column-width(定义每栏的宽度,会根据每栏宽度自动分成若干栏)<style> .wrap {width: 900px; border: 1px solid #000; font: 14px/28px "宋体"; color: #000; text-indent2em; -webkit-column-width: 250px;} </style> <body> <div class="wrap"> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> </div> </body>
分栏布局,-webkit-columen-count(定义总共分为几栏,会自动根据栏数计算每栏宽度)
<style> .wrap {width: 900px; border: 1px solid #000; font: 14px/28px "宋体"; color: #000; text-indent2em; -webkit-column-count: 4;} </style> <body> <div class="wrap"> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> </div> </body>
分栏布局,栏目距离column-gap(定义每栏之间的间隔)
<style> .wrap {width: 900px; border: 1px solid #000; font: 14px/28px "宋体"; color: #000; text-indent2em; -webkit-column-count: 4; -webkit-columen-gap: 30px;} </style> <body> <div class="wrap"> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> </div> </body>
栏目分隔线,columen-rule(定义每栏之间的线的样式)
<style> .wrap {width: 900px; border: 1px solid #000; font: 14px/28px "宋体"; color: #000; text-indent2em; -webkit-column-count: 4; -webkit-columen-gap: 30px; -webkit-columen-rule: 1px solid #000;} </style> <body> <div class="wrap"> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> </div> </body>
响应式布局
根据屏幕不同分辨率,采用不同的css文件,举例如下:
html文件内容,link中根据media来决定加载哪个css文件,最终根据屏幕分辨率会展现不同的样式
<head> <link rel="stylesheet" type="text/css" href="indexa.css" media="screen and (min-width:800px)"> <link rel="stylesheet" type="text/css" href="indexb.css" media="screen and (min-width:400px) and (max-width: 800px)"> <link rel="stylesheet" type="text/css" href="indexc.css" media="screen and (max-width: 400px)"> </head> <body> <div class="wrap"> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> <p>据央视消息,“世界记忆”遗产名录评选结果出炉,南京大屠杀档案被列入“世界记忆”名录。</p> </div> </body>
indexa.css内容
@charset "utf-8"; /* CSS Document */ .wrap{border:1px solid #000; font:14px/28px "宋体";color:#000; text-indent:2em; -webkit-column-count:4; -webkit-column-gap:30px; -webkit-column-rule:1px solid #000;}
indexb.css内容
@charset "utf-8"; /* CSS Document */ .wrap{border:1px solid #000; font:16px/28px "宋体";color:#000; text-indent:2em; -webkit-column-count:2; -webkit-column-gap:20px; -webkit-column-rule:1px solid #000;}
indexc.css内容
@charset "utf-8"; /* CSS Document */ .wrap{border:1px solid #000; font:16px/28px "宋体";color:#000; text-indent:2em;}
响应式布局(横竖屏切换)
根据屏幕的横竖屏情况来展现不同的样式,横屏展示indexb.css,竖屏展示indexa.css样式
<head> <meta http-equiv="Content-Type" content="textml; charset=utf-8"> <title>无标题文档</title> <link rel="stylesheet" media="all and (orientation:portrait)" href="indexb.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="indexa.css"> </head> <body> <div class="wrap"> <p>按照淘宝首页的无缝图片切换做:第一张和最后一张复制,打开浏览器时ul的left是-520,然后走完最后一张,ul的left是-1040。这样实现无缝切换,我就是卡在这里了,它这么样实现到最后一个还是顺着到-1040,保证不是倒 ...</p> <p>按照淘宝首页的无缝图片切换做:第一张和最后一张复制,打开浏览器时ul的left是-520,然后走完最后一张,ul的left是-1040。这样实现无缝切换,我就是卡在这里了,它这么样实现到最后一个还是顺着到-1040,保证不是倒 ...</p> <p>按照淘宝首页的无缝图片切换做:第一张和最后一张复制,打开浏览器时ul的left是-520,然后走完最后一张,ul的left是-1040。这样实现无缝切换,我就是卡在这里了,它这么样实现到最后一个还是顺着到-1040,保证不是倒 ...</p> <p>按照淘宝首页的无缝图片切换做:第一张和最后一张复制,打开浏览器时ul的left是-520,然后走完最后一张,ul的left是-1040。这样实现无缝切换,我就是卡在这里了,它这么样实现到最后一个还是顺着到-1040,保证不是倒 ...</p> <p>按照淘宝首页的无缝图片切换做:第一张和最后一张复制,打开浏览器时ul的left是-520,然后走完最后一张,ul的left是-1040。这样实现无缝切换,我就是卡在这里了,它这么样实现到最后一个还是顺着到-1040,保证不是倒 ...</p> <p>按照淘宝首页的无缝图片切换做:第一张和最后一张复制,打开浏览器时ul的left是-520,然后走完最后一张,ul的left是-1040。这样实现无缝切换,我就是卡在这里了,它这么样实现到最后一个还是顺着到-1040,保证不是倒 ...</p> <p>按照淘宝首页的无缝图片切换做:第一张和最后一张复制,打开浏览器时ul的left是-520,然后走完最后一张,ul的left是-1040。这样实现无缝切换,我就是卡在这里了,它这么样实现到最后一个还是顺着到-1040,保证不是倒 ...</p> </div> </body>
响应式布局中的另外一种写法
<style> @media screen and (min-width:800px) { .wrap{border:1px solid #000; font:14px/28px "宋体";color:#000; text-indent:2em; -webkit-column-count:4; -webkit-column-gap:30px; -webkit-column-rule:1px solid #000;} } @import url("indexc.css") screen and (min-width:400px) and (max-width:800px); @media screen and (max-width:400px) { .wrap{border:1px solid #000; font:16px/28px "宋体";color:#000; text-indent:2em; -webkit-column-count:2; -webkit-column-gap:20px; -webkit-column-rule:1px solid #000;} } </style>
相关文章推荐
- CSS中margin和padding的区别
- js.css压缩工具
- JS+DIV+CSS排版布局实现美观的选项卡效果
- CSS HACK
- div+css=>遮罩+弹出框(固定在页面中间)
- Photoshop图象切片保存为网页HTML(DIV+CSS布局)的方法
- 聊聊css水平垂直居中那些事
- 滚动条样式
- css学习笔记三
- 2015-10-10 发现的问题及解决
- css学习笔记二
- css display的用法及原理
- JS+DIV+CSS排版布局实现美观的选项卡效果
- css学习笔记一
- CSS超出部分显示省略号的方法(单行和多行)
- CSS图文列表中图片以正方形显示
- js 文件中,如何插入其它 js 、 css 文件
- ExtJs 4.2 textfield 去除边框样式为下划线
- css3 3d图形旋转显示
- css html布局的一些基本原理