在没有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基础 - UITableView的数据源和代理

    一.UITableView的代理方法 #pragma mark 每一行的高度 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtI ...

  2. 【学习笔记】《JavaScript DOM 编程艺术》 ——总结

    一.要点阐述 1,程序设计语言分为解释型和编译型两大类,JS属于解释型,在Web浏览器中一边解释一边执行. 2,"//"注释单行,"/*...*/"注释多行.反 ...

  3. PRML 第三章 - 线性回归

    这段时间组里在有计划地学习书籍PRML (Pattern Recognition and Machine Learning),前两天自己做了一个里面第三章linear regression的分享,这里 ...

  4. [google面试CTCI] 1-8.判断子字符串

    [字符串与数组] Q:Assume you have a method isSubstring which checks if one word is a substring of another G ...

  5. ios学习笔记之UIControl解读

    UIControl,相信大家对其并不陌生吧,比如平常最常用的UIButton就是继承自UIControl的.按照惯例,还是先来看看为什么有UIControl这个类?什么时候用到它? 查下文档就可以看到 ...

  6. 读取xml并将节点保存到Excal

    using NPOI.HPSF; using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; using System; using System.Coll ...

  7. 开启和禁用Wifi热点命令

    netsh wlan set hostednetwork mode=allow ssid=[无线网络名字] key=[密码] netsh wlan start hostednetwork --启用 禁 ...

  8. Jquery EasyUI tabs处理

    一 获取选中的 Tab 1.   // 获取选中的 tab panel 和它的 tab 对象 2.  var pp = $('#tt').tabs('getSelected'); 3.  var ta ...

  9. 使用CLR Profiler分析.NET程序

    使用CLR Profiler分析.NET程序 就像剥去.NET语法糖衣的工具(Reflector等)很多一样,我们可以用来分析.NET程序性能的工具有很多,如前面一片博文DebugLZQ给大家介绍的v ...

  10. JS左侧菜单-02

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns=" ...