在没有C3的时候,响应式布局是通过js来实现的.

开始研究响应式web设计，CSS3 Media Queries是入门。

Media Queries，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备

下面看代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1" />

     <title>Document</title>

     <link rel="stylesheet" href="one.css" media="screen and (min-width: 1000px)">

     <link rel="stylesheet" href="two.css" media="screen and (min-width: 600px) and (max-width: 1000px)">

     <link rel="stylesheet" href="three.css" media="screen and (max-width: 600px)">

 </head>

 <body>

     <div class="one">

         <p>

             前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript！它要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层

         </p>

         <p>

             前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。

         </p>

         <p>

             前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript它要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。随着近两三年来RIA（Rich Internet Applications的缩写，中文含义为：丰富的因特网应用程序）的流行和普及带来的诸如：Flash/Flex，Silverlight、XML和服务器端语言（PHP、ASP.NET，JSP、Python）等语言，前端开发工程师也需要掌握。

         </p>

     </div>

 </body>

 </html>

可以看到,我在外链的css中使用了一个media属性

<link rel="stylesheet" href="one.css" media="screen and (min-width: 1000px)">

而在media中

1、screen：这个不用说大家都知道，指的是一种媒体类型,CSS2.1定义了10种媒体类型;

2、and：被称为关键词，其他关键字还包括 not(排除某种设备)，only(限定某种设备);

3、（min-width:1000px）：这个就是媒体特性，其被放置在一对圆括号中

这句话就是说屏幕宽度最小为1000px时,也就是大于等于1000px时候,应用one.css样式表

那么同理，(min-width: 600px) and (max-width: 1000px)

表示屏幕宽度是在大于等于600px，小于等于1000px

(max-width: 600px)

就是最大为600px，也就是小于等于600px

而在one.css和two.css以及three.css中

 * {

     margin: 0;

     padding: 0;

 }

 .one {

     column-count: 3;/*设置列数为三列*/

     column-rule: dashed;/*设置列的样式*/

 }

 .one p {

     text-indent: 2em;/*缩紧2个字符*/

 }

one里面的的column-count：3

two里面的的column-count：2

three里面的的column-count：1

那么一个简单的响应式就做好了

如图：三列

二列

一列

这篇比我写的详细，想更深入了解，可以去看看

响应式web设计之CSS3 Media Queries

当然就我个人而言，js实现的效果比这个新属性要来的实在

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

  1. html5 + css3 + jQuery + 响应式布局设计

    1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...

  2. CSS3之响应式布局及其应用

    使用 Media 属性前需添加兼容移动设备优先代码 <meta name=”viewport”content=”width=device-width,initial-scale=1.0,maxi ...

  3. 【CSS3】响应式布局

    准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 1 <meta name="viewport" content ...

  4. css3图片响应式布局

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 原生css3作响应式布局

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. css3media响应式布局

    响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的 普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很 ...

  7. html5+css3+jquery完成响应式布局

    响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们 ...

  8. css3媒体查询实现网站响应式布局

    最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...

  9. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

随机推荐

  1. Dynamics CRM 多个Form显示不同的Ribbon按钮

    昨天群里熊宸(Microfoft MVP)给大家分享了以“Dynamics CRM 客户端编程概况”为主题,在群里给大家做了一次精彩的分享. 一些朋友聊到了Ribbon按钮在Form上的显示问题,因为 ...

  2. 在win下，如何用bat看程序运行的时间

    上网搜了下用bat记录程序运行时间的方法,结果连google跳出的都是些什么ctime啥的- - 一点都不靠谱 傍晚问了几个大神,也大多都是ctime党,不过还好明哲造![跪跪跪] 在此mark 就比 ...

  3. Vijos1055 奶牛浴场（极大化思想求最大子矩形）

    思路详见 王知昆<浅谈用极大化思想解决最大子矩形问题> 写得很详细(感谢~....) 因为不太会用递推,所以用了第一种方法,时间复杂度是O(n^2),n为枚举的点数,对付这题绰绰有余 思路 ...

  4. z-index 解析

    很多人对z-index的认识仅止于:z-index是控制元素在页面中的堆叠顺序,z-index值高的元素显示在z-index值低的前面.而其中的原因才很少有人去深究,直到自己在实际项目中碰到由于z-i ...

  5. asp.net mvc异步查询

    对于asp.net mvc异步查询 如何做MVC异步查询,做列表页面. 查询是项目中必不可少的工作,而且不同的项目不同的团队,都有自己的简单方法.Asp.net mvc 有自己独特的优势,下面是结合m ...

  6. 使用 Entity Framework Code First

    使用 Entity Framework Code First 在家闲着也是闲着,继续写我的[ASP.NET MVC 小牛之路]系列吧.在该系列的上一篇博文中,在显示书本信息列表的时候,我们是在程序代码 ...

  7. .net分页控件简单实现

    .net分页控件简单实现 好久好久没写博客了.....最近写了一个.net的分页控件,放到园子里...你觉得好,就点个赞,不好呢,就告诉我为啥吧.... 是使用Request.QueryString的 ...

  8. [置顶] logistic回归（一）

    先介绍下基础的公式: 这个是Sigmoid函数,在这个回归过程中非常重要的函数,主要的算法思想和这个密切相关.这个函数的性质大家可以自己下去分析,这里就不细说了. 然后我们说明下流程,首先我们将每个特 ...

  9. Python pandas 0.19.1 Intro to Data Structures 数据结构介绍 文档翻译

    官方文档链接http://pandas.pydata.org/pandas-docs/stable/dsintro.html 数据结构介绍 我们将以一个快速的.非全面的pandas的基础数据结构概述来 ...

  10. [hystar整理]Entity Framework 教程

    参考页面: http://www.yuanjiaocheng.net/entity/entity-relations.html http://www.yuanjiaocheng.net/entity/ ...