1.<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

viewport:视图窗口，width:视口内容宽度  initial-scale:初始时比例，不进行缩放，user-scalable=no 禁止用户触屏缩放屏幕

2.避免使用绝对单位如（px）,应该使用相对单位（%，em,rem），使用流式布局，使用响应式图片。

3.Media Queries 应用

①<link rel="stylesheet" type="text/css" href="style1.css" media="screen and (min-width: 500px)">//当屏幕的宽度大于等于500px的时候，应用style1.css
②同理
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/

  .class {

    background: #ddd;

  }

}

以下是demo

一个三栏布局的，在不同的尺寸下，变为两栏，再变为一栏~

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

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

<title>css3-media-queries-demo</title>

<style>

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {

    padding: 0;

    margin: 0;

}

.content{

    zoom:1;

}

.content:after{

    content: ".";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

}

.leftBox, .rightBox{

    float: left;

    width: 20%;

    height: 500px;

    margin: 5px;

    background: #ffccf7;

    display: inline;

    -webkit-transition: width 1s ease;

    -moz-transition: width 1s ease;

    -o-transition: width 1s ease;

    -ms-transition: width 2s ease;

    transition: width 1s ease;

}

.middleBox{

    float: left;

    width: 50%;

    height: 800px;

    margin: 5px;

    background: #b1fffc;

    display: inline;

    -webkit-transition: width 1s ease;

    -moz-transition: width 1s ease;

    -o-transition: width 1s ease;

    -ms-transition: width 1s ease;

    transition: width 1s ease;

}

.rightBox{

    background: #fffab1;

}

@media only screen and (min-width: 1024px){

    .content{

            width: 1000px;

            margin: auto

        }

}

@media only screen and (min-width: 400px) and (max-width: 1024px){

    .rightBox{

        width: 0;

    }

    .leftBox{ width: 30%}

    .middleBox{ width: 65%}

}

@media only screen and (max-width: 400px){

    .leftBox, .rightBox, .middleBox{

        width: 98%;

        height: 200px;

    }

}

</style>

</head>

<body>

<div class="content">

  <div class="leftBox"></div>

  <div class="middleBox"></div>

  <div class="rightBox"></div>

</div>

</body>

</html>

　　

参考文章：http://www.swordair.com/blog/2010/08/431/

　　　　　http://www.zhangxinxu.com/wordpress/2011/08/css3-media-queries%E7%9A%84%E4%BA%9B%E9%87%8E%E5%8F%B2%E5%A4%96%E4%BC%A0/

　　　　　http://webdesignerwall.com/tutorials/css3-media-queries

　　　　　http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html

项目总结一：响应式之CSS3 媒体查询的更多相关文章

  1. html5 响应式布局（媒体查询）

    响应式布局        响应式布局,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.        响应式布局可以为不同终端的用户 ...

  2. (响应式PC端媒体查询)电脑屏幕分辨率尺寸大全

    (响应式PC端媒体查询)电脑屏幕分辨率尺寸大全 时间:2015-08-17 16:50:40      阅读:3961      评论:0      收藏:0      [点我收藏+] 标签:styl ...

  3. pc端常用电脑屏幕 （(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）

    PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率   比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3  | 10.4寸.12.1寸.1 ...

  4. 响应式web之媒体查询（一）

    HTML4和css2目前支持为不用的媒体类型设定专有的样式,如,一个页面在屏幕上时使用无衬线字体,而在打印时使用衬线字体.screen和print是两种已定义的媒体类型.媒体查询让样式表有更强的针对性 ...

  5. 响应式布局之媒体查询 @media

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

  6. 30套免费的响应式 HTML5 & CSS3 模板下载

    HTML5 和 CSS3 网站模板存在巨大的需求,网页设计师们都喜欢现成的网站模板,能够轻松地设计和开发美观,吸引眼球的网站.如果你正在寻找响应式的 HTML5 & CSS3 模板,那么你找对 ...

  7. 12款高质量的响应式 HTML5/CSS3 网站模板

    HTML5 已经成为众所周知的语言,大量的 HTML5 资源和工具正在建立,以帮助开发人员和设计人员.今天,我们展示12款免费的响应式 HTML5/CSS3 网站模板,帮助你创建醒目和视觉震撼的网站. ...

  8. CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）

    /* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (m ...

  9. iPhone的CSS3媒体查询

    iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...

随机推荐

  1. 201521123117 《Java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...

  2. 201521123109 《java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  3. 201521123012 《Java程序设计》第十周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 1.本次PTA作业题集异常.多线程 finally 题目4-2 1.1 截图你的提交结果(出 ...

  4. 201521123027 <java程序设计>第十周学习总结

    1.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 异常: 多线程: 2.书面作业 Q1.finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 ...

  5. JAVA课程设计-----加减法测试博客

    1.团队成员介绍(一个人做的) 谢季努:网络1513 201521123079 2.项目git地址 3.项目git提交截图 4.项目运行截图 输入答案后点击确认就会出现本次的得分 如果觉得成绩不理想点 ...

  6. Maven第四篇【私有仓库、上传jar包、引用私服jar包、上传本地项目到私服】

    搭建私有服务器 前面已经说过了,我们使用Maven的使用,如果需要导入相对应的jar包,Maven首先会在我们的本地仓库中寻找->私有仓库->中心仓库- 然而,我们的本地仓库常常没有想要的 ...

  7. 02-windows 安装以太坊 ethereum 客户端 （win7-64）-大叔思维

    以太坊(Ethereum)是一个运行智能合约的去中心化平台(Platform for Smart Contract),平台上的应用按程序设定运行,不存在停机.审查.欺诈.第三方人为干预的可能.以太坊平 ...

  8. Android 之http编程

    HTTP-GET和HTTP-POST定义: 都是使用HTTP的标准协议动词,用于编码和传送变量名/变量值对参数,并且使用相关的请求语义. 每个HTTP-GET和HTTP-POST都由一系列HTTP请求 ...

  9. CSS公用

    *{font-size: 100px;} body,span,h1,h2,h3,h4,h5,h6,li,ul,p,em,strong,ol,form,pre,input,article,header, ...

  10. SQL 常用语法一

    整理笔记,并将常用的SQL语法记录下来. 这些方法有 CASE WHEN, IFNULL,GROUP BY,LIMIT,SUBSTR 1,字段转换 CASE WHEN 意义: If(a==b) a=c ...