响应式布局

  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. X86架构与ARM架构比较

    引言 CPU是怎样运作的? CPU的运作与人脑的运作差不多.先谈一下人这个系统的工作方式.眼镜.耳朵.舌头.皮肤等等感觉器官接收到“触觉”,把信息传给大脑,大脑把信息处理后,把处理结果送给手.脚.嘴等 ...

  2. Adobe Photoshop CS或者CC卸载不了怎么办？

    有木有没有遇到这个问题的同学?使用Adobe Creative Suite CleanerToo工具下载就好了~ 下载地址:http://pan.baidu.com/s/1pJ3aBsn

  3. 通用GPIO模拟串口，提供源代码，本人经过测试OK（第一版）

    --------------------------serial.h------------------------------------------ #ifndef _SERIAL_H_ #def ...

  4. Delphi控件的显示内容与显示边框是两回事

    没有内容,不代表没有边框.比如设计期一个空的TImage仍是有边框的. if (csOpaque in image1.ControlStyle) then ShowMessage('不透明')else ...

  5. 《how to design programs》15章 相互引用的数据定义

    由结构体组成的表与结构体中的表. 在用追溯形式建立家家谱树时,我们通常从某个后代除法,依次处理它的父母,组父母等.而构建树时,我们会不断添加谁是谁的孩子,而不是写出谁是谁的父母,从而建立一颗后代家谱树 ...

  6. 【C++基础之十五】内联函数

    1.优点 为什么使用内联函数,而不使用宏定义,虽然宏本身采用的展开来替代函数调用的压栈出栈返回等操作,提高了代码的效率,但是会有两个问题: (1)边际效应 宏只是展开代码而已,所以在一些操作符的优先级 ...

  7. 【POJ】2278 DNA Sequence

    各种wa后,各种TLE.注意若AC非法,则ACT等一定非法.而且尽量少MOD. #include <iostream> #include <cstdio> #include & ...

  8. 【动态规划】Vijos P1143 三取方格数（NOIP2000提高组）

    题目链接: https://vijos.org/p/1143 题目大意: NxN的矩阵,每个值只能取一次,从(1,1)走到(n,n)走三次能取得的最大值. 题目思路: [动态规划] f[x1][y1] ...

  9. 迭代加深搜索算法总结 + Editing a Book UVa11212题解

    迭代加深搜索算法: 对于可以用回溯法解决,但是解答树结点数大的恐怖的问题的一种解决办法,有的问题甚至用bfs连一层节点都遍历不完就超时了.具体方法就是依次枚举搜索层数,从1到一个上限. 结构: int ...

  10. poj 1609 dp

    题目链接:http://poj.org/problem?id=1609 #include <cstdio> #include <cstring> #include <io ...