在没有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. 大数据工具篇之Hive与MySQL整合完整教程

    大数据工具篇之Hive与MySQL整合完整教程 一.引言 Hive元数据存储可以放到RDBMS数据库中,本文以Hive与MySQL数据库的整合为目标,详细说明Hive与MySQL的整合方法. 二.安装 ...

  2. linux 编程技术

    linux 编程技术No.1前期准备工作 GCC的编译过程分为预处理.生成汇编代码.生成目标代码和链接成可执行文件等4个步骤. 使用vim编写C 文件 : [lining@localhost prog ...

  3. 一、SOAP简单对象访问协议讲解

    一.SOAP简单对象访问协议讲解 今天给大家讲讲SOAP的基本知识.下节给大家演示创建基于SOAP的Web Service. 更多SOA文章请查看我的个人博客. 首先,让我来简单一下入门SOAP所需的 ...

  4. intellij idea 学习

      intellij idea是一个java的ide.由jetbrain开发.     intellij idea快捷键 快捷键 说明 备注 Ctrl+N 快速导航到类 类似于Resharper中的C ...

  5. poj3984迷宫问题

    一个5 × 5的二维数组,表示一个迷宫.其中的1表示墙壁,0表示可以走的路,只能横着走或竖着走,不能斜着走,要求编程序找出从左上角到右下角的最短路线. 很简单的一道题,迷宫问题,一般都选择两种优先搜索 ...

  6. Orchard网上商店模块

    从头开始编写一个Orchard网上商店模块(1) - 介绍 原文地址:http://skywalkersoftwaredevelopment.net/blog/writing-an-orchard-w ...

  7. 微软RDLC报表打印

    关于微软RDLC报表打印时文字拉伸问题(Windows server 2003 sp2) 最近我们开发的打印服务频频出现打印文字拉伸问题,客户意见络绎不绝,最为明显的是使用黑体加粗后 “2.0份” 打 ...

  8. java的几种对象解释

    一.PO:persistent object 持久对象,可以看成是与数据库中的表相映射的Java对象.最简单的PO就是对象数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何数据 ...

  9. JavaScript function函数种类介绍

    JavaScript function函数种类介绍 本篇主要介绍普通函数.匿名函数.闭包函数 1.普通函数介绍 1.1 示例 ? 1 2 3 function ShowName(name) {     ...

  10. .NET：再论异常处理，一个真实的故事

    .NET:再论异常处理,一个真实的故事 背景 关于是使用枚举或布尔类型来表示方法执行状态,还是使用异常,可以参考这里的文章:http://www.google.ee/search?q=site%3Aw ...