响应式布局

  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. 【转】分享II→IV FPGA本人的几个版本电源模块设计的方案

    很多人问我FPGA的电源怎么怎么着,当然也有人瞎忽悠乱设计,当然我的设计也不是很完美...这里把我当年第一次设计FPGA,到现在的电源方案,几个演变.分析的过程,给大家讲讲... (1)FPGA电源方 ...

  2. Fastreport怎么样在同一页上下部分打印相同内容

    使用FastReport遇到个难题,不知道怎么解决 分组打印之后,需要同一页上下部分打印相同内容,就是一式两份的联单打印. 例如: 送货单 ********** A 这里上半页,地区分组之后的内容 * ...

  3. Web.config总结

    %windir%/Microsoft.NET/Framework/v2.0.50727/CONFIG目录下machine.config定义了针对当前机器的WinForm程序和asp.net应用程序的配 ...

  4. 非正式js语法

    有一种格式化的变种(该变种没有通过JSLint测试)略过了花括号,并将if语句放在同一行中. 这样做的好处是该循环语句变得可读性更强(对于每个拥有属性X的元素,就直接对X进行操作). 这样做的结果是只 ...

  5. struts2.0 struts.xml配置文件详解

    <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN&quo ...

  6. 第二章 Stream API

    引例: 1 List<String> strList = Arrays.asList("zhaojigang","nana","tiany ...

  7. 【转】【已解决】Android中ActionBar中不显示overflow（就是三个点的那个按钮）--不错

    原文网址:http://www.crifan.com/android_actionbar_three_dot_overflow_not_show/ [问题] 折腾: [记录]继续尝试给Android程 ...

  8. Codeforces Round #216 (Div. 2) E. Valera and Queries 树状数组 离线处理

    题意:n个线段[Li, Ri], m次询问, 每次询问由cnt个点组成,输出包含cnt个点中任意一个点的线段的总数. 由于是无修改的,所以我们首先应该往离线上想, 不过我是没想出来. 首先反着做,先求 ...

  9. SRM 398(1-250pt)

    题意:有两个变量x和y,三种运算符+,*,-,组成等式"变量 运算符 变量 运算符 变量 运算符 变量",要求每个变量恰好出现两次,且等式的值为val的等式有多少个.注意不计算运算 ...

  10. lightoj 1300 边双联通分量+交叉染色求奇圈

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1300 边双连通分量首先dfs找出桥并标记,然后dfs交叉着色找奇圈上的点.这题只要求在 ...