在没有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. c语言可变参函数探究

    一.什么是可变长参数 可变长参数:顾名思义,就是函数的参数长度(数量)是可变的.比如 C 语言的 printf 系列的(格式化输入输出等)函数,都是参数可变的.下面是 printf 函数的声明: in ...

  2. RPC（Remote Procedure Call Protocol）

    远程过程调用协议: 1.调用客户端句柄:执行传送参数 2.调用本地系统内核发送网络消息 3.消息传送到远程主机 4.服务器句柄得到消息并取得参数 5.执行远程过程 6.执行的过程将结果返回服务器句柄 ...

  3. Sql Server实现多行数据按分组用逗号分隔成一行数据

    例如,要将下面的数据 以GROUP_ID进行分组,一组一行,一组中的多个PRODUCT_ID用逗号分隔,select 出来成如下结果: 在Sql Server中,我目前想到的一种方法是写一个函数,如下 ...

  4. 【又长见识了】C#异常处理，try、catch、finally、throw

    异常处理:程序在运行过程中,发生错误会导致程序退出,这种错误,就叫做异常.处理这种错误,就叫做异常处理. 1.轻描淡写Try.Catch.Finally.throw用法 在异常处理中,首先需要对可能发 ...

  5. 2012 T-SQL 新特性 and O2O项目

    SQL Server 2012 T-SQL 新特性 NoSQL之HBase   9月初淘宝飞芃做了一个关于HBase的分享,讲的激情飞扬,让听众收益匪浅,现做下简单总结. HBase是一个NoSQL数 ...

  6. hive left outer join的问题

    最近BA用户反馈有两句看似很像的语句返回的结果数不一样,比较奇怪,怀疑是不是Hive的Bug Query 1 返回结果数6071 select count(distinct reviewid) as ...

  7. javascript eval和JSON之间的关系

    eval函数的工作原理 eval函数会评估一个给定的含有javascript代码的字符串,并且视图去执行包含在字符串里的表达式或者 一系列的合法的javascript语句.eval函数将把最后一个表达 ...

  8. 常用的模式、JSON与DTO

    表现层的设计(一)——常用的模式.JSON与DTO 上几篇博文介绍了 业务逻辑层和数据访问层,我认为写博文的作用主要是向业界的读者交流一种思想,点到为止,至于学习架构设计,通过几篇博文是讲不清楚的,还 ...

  9. Jquery 类似新浪微博，鼠标移到头像，用浮动窗口显示用户信息，已做成一个jquery插件

    请注意!!!!! 该插件demo PHP 的 demo下载  C#.NET的demo下载 需要如下图, 1.鼠标移动到头像DIV时,Ajax获取数据,并让浮动DIV显示出来. 2.鼠标可以移动到上面浮 ...

  10. MongoDB的一些用法(转藏)

    MongoDB是目前工作中经常使用到的NoSQL数据库. 本博客只记录相关理论知识和技巧,涉及到实践的部分都会单开Blog来记录实践过程. ------------------------------ ...