响应式布局

  1. 分栏布局，-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>
  2. 分栏布局，-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>
  3. 分栏布局，栏目距离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>
  4. 栏目分隔线，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>
  5. 响应式布局
    • 根据屏幕不同分辨率，采用不同的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:; -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:; -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;}
  6. 响应式布局（横竖屏切换）
    • 根据屏幕的横竖屏情况来展现不同的样式，横屏展示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>
  7. 响应式布局中的另外一种写法 
    • <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>

css3响应式布局的更多相关文章

  1. html5/css3响应式布局介绍及设计流程

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

  2. CSS3–2.css3 响应式布局

    1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...

  3. CSS3 响应式布局： @media (min/max-width:***) @font-face

    响应式布局 responsive design @media 属性 bootstrap  css 分析: @media (min-width:768px){ body{***} } use @medi ...

  4. css3 响应式布局 Media Query

    1.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简单说就是一个网站能够兼容多个终端. 2.响应式布局的优缺点? 优点:面对不同分辨率设备灵活性强,快捷 ...

  5. CSS3–2.css3 响应式布局

    1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...

  6. css3响应式布局教程—css3响应式

    响应式布局 一个网站能够兼容多个终端,并且在各个终端都可以很好展示体验. 媒体类型 在何种设备或者软件上将页面打开 123456789 all:所有媒体braille:盲文触觉设备embossed:盲 ...

  7. css3响应式布局设计——回顾

    响应式设计是在不同设备下分辨率不同显示的样式就不同. media 属性用于为不同的媒体类型规定不同的样式.根绝浏览器的宽度和高度重新渲染页面. 语法: @media mediatype and | n ...

  8. CSS3响应式布局之弹性盒子

    CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...

  9. html5 响应式布局（媒体查询）

    响应式布局        响应式布局,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.        响应式布局可以为不同终端的用户 ...

随机推荐

  1. Python的subprocess模块

    尝试在Python中运行可执行文件,网上给出的解决方案是: import os os.system("此处填程序路径") 我要运行的程序文件名中有空格,因此果断失败了,查看了一下帮 ...

  2. ExtJS简单的动画效果2（ext js淡入淡出特效）

    Ext 开发小组则提供了 Fx 类集中处理了大部分常用的 js 动画特效,减少了我们自己手写代码的复杂度. 面我给出一个简单的实例代码,其中囊括了大部分的 Ext 动画效果: (注意导入js和css文 ...

  3. W3C vs. WHATWG HTML5 Specs – The Differences Documented

    A few weeks ago, HTML5 became an official W3C Recommendation. I took advantage of this event to disc ...

  4. SKYLINE

    uvalive4108:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&pag ...

  5. Prime Path（poj 3126)

    Description The ministers of the cabinet were quite upset by the message from the Chief of Security ...

  6. 华为5700交换机通过外部开源protal和本地aaa用户认证的一些问题

    http://support.huawei.com/ecommunity/bbs/10178271.html?p=1#p0 华为5700交换机通过外部开源protal和本地aaa用户认证的一些问题 各 ...

  7. 【转】eclipse -- the project was not built due to a resource exists with a different case...

    原文网址:http://blog.csdn.net/mylinx/article/details/44280563 进行编码时,工程前面莫名有个红X,正当百思不得其解时,发现在[problems]下有 ...

  8. 【宽搜】ECNA 2015 E Squawk Virus (Codeforces GYM 100825)

    题目链接: http://codeforces.com/gym/100825 题目大意: N个点M条无向边,(N<=100,M<=N(N-1)/2),起始感染源S,时间T(T<10) ...

  9. WCF—Binding

    原文地址:http://www.cnblogs.com/jams742003/archive/2010/01/13/1646379.html Binding描述了哪些层面的信息 一个Binding包含 ...

  10. 在C#中internal关键字是什么意思？

    这个回答的很不错 :http://zhidao.baidu.com/link?url=BGmYomZnf_-94L4uPXa-gzYMssL5HGmZyk_fFG7x4i4z_vL8qN3o7CrJg ...