响应式布局

  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. How to use System.Diagnostics.Process correctly

    I’ve seen many a question on stackoverflow and other places about running a process and capturing it ...

  2. [BZOJ 1874] [BeiJing2009 WinterCamp] 取石子游戏 【博弈论 | SG函数】

    题目链接:BZOJ - 1874 题目分析 这个是一种组合游戏,是许多单个SG游戏的和. 就是指,总的游戏由许多单个SG游戏组合而成,每个SG游戏(也就是每一堆石子)之间互不干扰,每次从所有的单个游戏 ...

  3. 权重随机算法的java实现

    一.概述 平时,经常会遇到权重随机算法,从不同权重的N个元素中随机选择一个,并使得总体选择结果是按照权重分布的.如广告投放.负载均衡等. 如有4个元素A.B.C.D,权重分别为1.2.3.4,随机结果 ...

  4. VIM大作战之C++简易集成编译环境（Windows篇）

    一切都要从这篇文章说起 Vim 实在是精致独特得有点像个林妹妹.但谁要是希望家里也有个林妹妹,光把自家丫头照着绣像打扮打扮是不行的,必须从零开始养成一个.而且就算真能养出来个“天上掉下来”一般的可人儿 ...

  5. wchar_t与char、wstring与string的相互转换

    个人倾向于使用优秀的开源库做这个. 最近使用boost进行转换,代码极其简单: boost::filesystem::path src(wchar_t); char = src.string().c_ ...

  6. a为整型数组，&a+1的含义

    #include <stdio.h> int main() { int a[10]; printf("a的值为:\t%d\n",a); printf("&am ...

  7. 饭卡 （背包01 一维数组） http://acm.hdu.edu.cn/showproblem.php?pid=2546

    /* 从一组数据中选出n个数,使这n个数的和最接近一个值x, 背包问题, 从一系列菜中,从最贵的菜(MAX)之外中选出几个菜,使菜的总价格sum最接近money-5:money-sum-MAX; 钱数 ...

  8. [转载]你需要知道的 16 个 Linux 服务器监控命令

    转载自: 你需要知道的 16 个 Linux 服务器监控命令 如果你想知道你的服务器正在做干什么,你就需要了解一些基本的命令,一旦你精通了这些命令,那你就是一个 专业的 Linux 系统管理员. 有些 ...

  9. poj2586

    千年虫病毒 一个财务公司受到电脑病毒攻击所以丢失了一部分年终财务的数据. 他们所有记得的东西都在Inc里面储存着,在1999年之前公司要每个月都贴出盈利和亏损情况.亏损的是d,由于收到了攻击,他们不记 ...

  10. Azkaban2官方配置文档

    最近工作实在是太忙了,我把之前翻译的官方的文档先放上来吧,希望对大家有所帮助~ 介绍 Azkaban2新功能: 1.Web UI 2.简单工作流上传 3.更容易设置job的依赖关系 4.调度工作流 5 ...