响应式布局

  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. bzoj1662: [Usaco2006 Nov]Round Numbers 圆环数

    Description 正如你所知,奶牛们没有手指以至于不能玩“石头剪刀布”来任意地决定例如谁先挤奶的顺序.她们甚至也不能通过仍硬币的方式. 所以她们通过"round number" ...

  2. tomcat服务器报Server at localhost was unable to start within 45 seconds的问题

    今天在同一个tomcat服务器下部署了2个不同的应用程序,然后启动时报错:Server at localhost was unable to start within 45 seconds.If th ...

  3. Qt 文件处理（readLine可以读取char[]，并且有qSetFieldWidth qSetPadChar 等全局函数）

    Qt 文件处理 Qt提供了QFile类来进行文件处理,为了更方便地处理文本文件或二进制文件,Qt还提了QTextStream类和QDataStream类,处理临时文件可以使用QTemporaryFil ...

  4. JPA学习笔记

    一.JPA基础1.1 JPA基础JPA: java persistence api 支持XML.JDK5.0注解俩种元数据的形式,是SUN公司引入的JPA ORM规范 元数据:对象和表之间的映射关系 ...

  5. Linux Kernel 释放后重用内存损坏漏洞

    漏洞名称: Linux Kernel 释放后重用内存损坏漏洞 CNNVD编号: CNNVD-201307-305 发布时间: 2013-07-18 更新时间: 2013-07-18 危害等级:    ...

  6. VisualSVN_Server安装_配置图文教程

    前言: 不错的文章 对一个我这样的菜鸟来说,这个教程很容易理解,说它图文并茂并不为过.所以就把它整理成了文档,给大家分享. 文章版权归原作者Forrest Zhang所有. 原文出处: http:// ...

  7. Light OJ 1013 Love Calculator(DP)

    题目大意: 给你两个字符串A,B 要求一个最短的字符串C,使得A,B同时为C的子串. 问C最短长度是多少? C有多少种? 题目分析: 做这道题目的时候自己并没有推出来,看了网上的题解. 1.dp[C串 ...

  8. 今天修改bug基本完成

    今天修改bug基本完成 在修改bug过程中配到几个郁闷的问题,印象最深的两个1.检查出生日期或日期的合法性,引用的日历控件不能完全保证取到值时操作,现在突然想到或许我该仔细研究日历控件接口,在返回错误 ...

  9. 组合数学（Pólya计数原理）：UvaOJ 10601 Cubes

    Cubes You are given 12 rods of equal length. Each of them is colored in certain color. Your task is ...

  10. HDOJ 2015 偶数求和

    Problem Description 有一个长度为n(n<=100)的数列,该数列定义为从2开始的递增有序偶数,现在要求你按照顺序每m个数求出一个平均值,如果最后不足m个,则以实际数量求平均值 ...