原文转自：http://blog.csdn.net/renfufei/article/details/19981133

　　　　　http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html

　　　　  http://www.blueidea.com/tech/web/2010/7912_3.asp

http://www.moke8.com/article-5657-1.html

一、基本定义

1、CSS中的Media Query（媒介查询）是什么？

通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。

2、media query能够获取哪些值？

设备的宽和高device-width，device-heigth显示屏幕/触觉设备。

渲染窗口的宽和高width，heigth显示屏幕/触觉设备。

设备的手持方向，横向还是竖向orientation（portrait|lanscape）和打印机等。

画面比例aspect-ratio点阵打印机等。

设备比例device-aspect-ratio-点阵打印机等。

对象颜色或颜色列表color，color-index显示屏幕。

设备的分辨率resolution。

3、语法结构及用法

@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

二、使用示例

1.写入一个css内，css内用media query区分

/*兼容IE8,满足条件时后面覆盖前面*/

.section{

        width:20%;

        height: 60px;

        background-color: yellow;

        float:left;

        border:1px solid white;

        color:white;

    }

/*宽度在200到600之间*/

@media screen and (min-width: 200px) and (max-width: 600px){

    .section{

        width:20%;

        height: 60px;

        background-color: red;

        float:left;

        border:1px solid white;

        color:white;

    }

}

/*宽度大于600px*/

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

    .section{

        width:45%;

        height: 90px;

        color:white;

        background-color: blue;

        float: left;

        border:1px solid white;

    }

}

2.引入css时，指定media属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="mediaQueryIE8.css">

    <link rel="stylesheet" media="screen and (min-width: 100px) and (max-width:600px)" type="text/css" href="mediaQuery2.css">

    <link rel="stylesheet" media="screen and (min-width: 600px) "type="text/css" href="mediaQuery3.css">

    <!--width为600px时，mediaQuery3.css生效，后面覆盖前面-->

</head>

<body>

    <div class="section">111111</div>

    <div class="section">222222</div>

    <div class="section">333333</div>

    <div class="section">444444</div>

    <div class="section">555555</div>

    <div class="section">666666</div>

    <div class="section">777777</div>

    <div class="section">888888</div>

    <div class="section">999999</div>

</body>

</html>

media query学习笔记的更多相关文章

  1. ArcGIS API for JavaScript 4.2学习笔记[21] 对3D场景上的3D要素进行点击查询【Query类学习】

    有人问我怎么这个系列没有写自己做的东西呢? 大哥大姐,这是"学习笔记"啊!当然主要以解读和笔记为主咯. 也有人找我要实例代码(不是示例),我表示AJS尚未成熟,现在数据编辑功能才简 ...

  2. Dynamic CRM 2015学习笔记（5）CRM 2015 导入 OData Query Designer 解决方案

    以前一直使用OData Query Designer来生成.验证odata查询字符串,本想把它导入到CRM 2015的环境里,但报错: 到MSDN上发现太老版本的solution确实不能再导入到crm ...

  3. Intel® Media SDK Media Samples Linux 学习笔记(转)

    最近折腾intel media sdk,主要硬件平台是在HD4600的核显上进行测试,intel media sdk是intel提供的一种基于核显的硬件编解码的解决方案,之前已经有使用ffmpeg进行 ...

  4. 【前端】移动端Web开发学习笔记【1】

    下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...

  5. iOS学习笔记-精华整理

    iOS学习笔记总结整理 一.内存管理情况 1- autorelease,当用户的代码在持续运行时,自动释放池是不会被销毁的,这段时间内用户可以安全地使用自动释放的对象.当用户的代码运行告一段 落,开始 ...

  6. iOS学习笔记总结整理

    来源:http://mobile.51cto.com/iphone-386851_all.htm 学习IOS开发这对于一个初学者来说,是一件非常挠头的事情.其实学习IOS开发无外乎平时的积累与总结.下 ...

  7. Windows phone 8 学习笔记(2) 数据文件操作（转）

    Windows phone 8 应用用于数据文件存储访问的位置仅仅限于安装文件夹.本地文件夹(独立存储空间).媒体库和SD卡四个地方.本节主要讲解它们的用法以及相关限制性.另外包括本地数据库的使用方式 ...

  8. Bootstrap学习笔记之整体架构

    之前有粗略地看过一下Bootstrap的内容,不过那只是走马观花式地看下是怎么用的,以及里面有什么控件,所以就没想着记笔记.现在由于要给部门做分享,所以不得不深入地去学习下,不然仅是简单地说下怎么用, ...

  9. pure学习笔记

    最近研究Pure,发现这个对于写css来说确实是个好的框架,特此总结了一番,如有错误或不足的地方,欢迎交流指点,轻拍. 此文运用的是优雅的Markdown而书 Pure学习笔记 #写在最前 1# Pu ...

随机推荐

  1. WinCE6.0多国语言软键盘

    N久以前写过一篇<WinCE下自定义的大软键盘>,这个自定义软键盘就是为RM905a+项目来做的.RM905a+的系统分辨率是640*480,WinCE原生键盘小的太小,大的又太大.所以就 ...

  2. QTdebug时没有调试引擎

    问题描述: 在调试程序时,点击调试按钮,弹出no engine. 问题解决: 到官网下载调试的SDK.https://developer.microsoft.com/zh-cn/windows/dow ...

  3. 关于 presentViewController 时机

    类似微信.QQ这些应用如果用户没有登录,会弹出登录界面,如果 presentViewController 是写在  viewDidAppear 之前,会有警告 Presenting view cont ...

  4. ini 文件

    INI文件是一个无固定标准格式的配置文件.它以简单的文字与简单的结构组成,常常使用在视窗操作系统,或是其他操作系统上,许多程序也会采用INI文件做为设置程序之用.视窗操作系统后来以注册表的形式替换掉I ...

  5. FMDBsqilte语句样式

    举例: @"create table student(stuid integer primary key autoincrement,name text,number integer,the ...

  6. JS,Jquery获取各种屏幕的宽度和高度

    Javascript: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.b ...

  7. 关于提交form不刷新的问题

    最近在做一个项目,除去主页面是html页面,点击菜单按钮都由ajax加载生成,在这种情景下,F5刷新或者提交form表单就会将页面回复到刚刚打开主页面. 现在有一个这样的场景,点击子菜单生成一个子页面 ...

  8. webform repeater控件

    Repeater: HeaderTemplate - 在加载开始执行一遍 ItemTemplate - 有多少条数据,执行多少遍 FooterTemplate - 在加载最后执行一遍 Alternat ...

  9. (转)jQuery中的extend()方法

    本文转自:http://www.xiabingbao.com/jquery/2015/05/30/jquery-extend 原文的排版要比这里美观很多,建议去原文查看.本文仅仅作为个人的mark,方 ...

  10. C++中使用初始化列表比在构造函数中对成员变量赋值更高效

    这是在面试中遇到的一个问题,没有答出来,后来上网上查了一些资料,终于弄明白了: 一.首先c++标准规定成员变量必须在调用构造函数前进行初始化(这一点很重要) 二.如果我们在构造函数中对成员变量进行初始 ...