在没有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. iOS基础 - Quartz 2D绘图

    一.Quartz 2D Quartz 2D是一个二维图形绘制引擎,支持iOS环境和Mac OS X环境. Quartz 2D以PDF的规范为基础的图形库,用来绘制二维文字和图形,允许相同的绘图指令在任 ...

  2. REDGATE又一好用的脚本工具

    REDGATE又一好用的脚本工具   REDGATE又一好用的脚本工具 先说明一下:这个工具是免费的 下载地址:http://www.red-gate.com/products/dba/sql-scr ...

  3. 使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享

    使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享 使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享    在开始讲解之前,我们先来看一下什 ...

  4. C#的匿名委托 和 Java的匿名局部内部类

    .NET:C#的匿名委托 和 Java的匿名局部内部类 目录 背景实验备注 背景返回目录 这几天重温Java,发现Java在嵌套类型这里提供的特性比较多,结合自身对C#中匿名委托的理解,我大胆的做了一 ...

  5. thinkphp实现自动登录

    网页上经常有一些自动登录的checkbox,勾选后,下次进入该网站,无需登录,即可执行一些需要登录才能执行的操作.上班无事,用thinkphp做了下 1 下面是一个很普通的form表单,有一个chec ...

  6. 译文：User-agent的历史

      这是一篇译文,译文出处在文章底部贴出.由于技术水平,英语水平,翻译水平有限,请各路大侠多多指正,谢谢,提高你也提高我:)   几个礼拜之前,我谈论了特征检测和浏览器检测.这篇帖子提到了一点点嗅探U ...

  7. SQLSERVER之高灵活的业务单据流水号生成

    SQLSERVER之高灵活的业务单据流水号生成 最近的工作中要用到流水号,而且业务单据流水号生成的规则分好几种,并非以前那种千篇一律的前缀+日期+流水号的简单形式,经过对业务的分析,以及参考网上程序员 ...

  8. jquery验证表单中的单选与多选

    jquery验证表单中的单选与多选 这里所说的,用jquery去验证某一组多选至少要有一个选中,某一组单选至少有一个选中,,大家都知道单一的一个用js比较好验证,但是想要用jquery的验证并且用到j ...

  9. tornado + supervisor + nginx + linux 亲身体验

    先说说思路 一.安装这些东西,tornado, supervisor( sudo pip install supervisor  在linux 系统上), 安装 nginx  (sudo apt-ge ...

  10. jquery.range.js左右滑动选取数值插件，动态改变进度。

    作为一个初级前端工作人员,我最近在做一个关于直播的项目,其中一个功能要求是设置延迟时间, 所以就用到了jquery.range.js这个插件.插件中设置$(".single-slider&q ...