media query学习笔记
原文转自：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学习笔记的更多相关文章
- ArcGIS API for JavaScript 4.2学习笔记[21] 对3D场景上的3D要素进行点击查询【Query类学习】
有人问我怎么这个系列没有写自己做的东西呢? 大哥大姐,这是"学习笔记"啊!当然主要以解读和笔记为主咯. 也有人找我要实例代码(不是示例),我表示AJS尚未成熟,现在数据编辑功能才简 ...
- Dynamic CRM 2015学习笔记（5）CRM 2015 导入 OData Query Designer 解决方案
以前一直使用OData Query Designer来生成.验证odata查询字符串,本想把它导入到CRM 2015的环境里,但报错: 到MSDN上发现太老版本的solution确实不能再导入到crm ...
- Intel® Media SDK Media Samples Linux 学习笔记(转)
最近折腾intel media sdk,主要硬件平台是在HD4600的核显上进行测试,intel media sdk是intel提供的一种基于核显的硬件编解码的解决方案,之前已经有使用ffmpeg进行 ...
- 【前端】移动端Web开发学习笔记【1】
下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...
- iOS学习笔记-精华整理
iOS学习笔记总结整理 一.内存管理情况 1- autorelease,当用户的代码在持续运行时,自动释放池是不会被销毁的,这段时间内用户可以安全地使用自动释放的对象.当用户的代码运行告一段 落,开始 ...
- iOS学习笔记总结整理
来源:http://mobile.51cto.com/iphone-386851_all.htm 学习IOS开发这对于一个初学者来说,是一件非常挠头的事情.其实学习IOS开发无外乎平时的积累与总结.下 ...
- Windows phone 8 学习笔记(2) 数据文件操作（转）
Windows phone 8 应用用于数据文件存储访问的位置仅仅限于安装文件夹.本地文件夹(独立存储空间).媒体库和SD卡四个地方.本节主要讲解它们的用法以及相关限制性.另外包括本地数据库的使用方式 ...
- Bootstrap学习笔记之整体架构
之前有粗略地看过一下Bootstrap的内容,不过那只是走马观花式地看下是怎么用的,以及里面有什么控件,所以就没想着记笔记.现在由于要给部门做分享,所以不得不深入地去学习下,不然仅是简单地说下怎么用, ...
- pure学习笔记
最近研究Pure,发现这个对于写css来说确实是个好的框架,特此总结了一番,如有错误或不足的地方,欢迎交流指点,轻拍. 此文运用的是优雅的Markdown而书 Pure学习笔记 #写在最前 1# Pu ...
随机推荐
- Android UI 绘制过程浅析（二）onMeasure过程
前言 View的绘制过程分为 measure.layout.draw三个步骤,接下来对这三个步骤逐一进行研究. measure方法的签名 public final void measure(int w ...
- Android Service 文档
应用场景: 1 用于将后台逻辑(Service中)和UI逻辑(Activity中)进行解耦,实现Service功能的复用,为其他程序提供功能. 2 后台功能,由于Activity在进入后台时(On ...
- 使用jna调用dll，jdk位数和dll位数的关系
最近在学习jna,发现dll文件能能否成功调用取决于jdk位数. 32位jdk只能使用32位的dll,64位jdk只能使用64位的dll,否则位数不对应的话报的错是 "Exception i ...
- vi 使用
1)命令 gf ,可以从光标指定的文件位置打开对应文件 :bd回来 2)http://www.cnblogs.com/wangkangluo1/archive/2012/04/12/244495 ...
- XidianOJ 1096 数的拆分
题目描述 输入自然数n,然后将其拆分成由若干数相加的形式,参与加法运算的数可以重复. 输入 多组数据.每组只有一个整数n,表示待拆分的自然数n. n<=80 输出 每组一个数,即所有方案数. - ...
- Linux内核启动logo
之前在分析samsung的fb驱动代码的时候,其中有一段代码是处理内核logo显示相关的,今天就内核logo这个话题来聊一聊! 一.处理内核logo显示相关的代码在哪? 回到samsung的fb驱动代 ...
- linux配置的问题
1 从系统设置-文本设置中把双拼删掉 2 通过sudo passwd root 修改root密码 3 通过su获取root权限 4 通过sudo pppoeconf输入宽带帐号密码 5 把更新源修改成 ...
- Android_ADB 常用 shell命令 和 sqlite3 简单增删改查
今天学习了一个ADB的常用命令.接下来简单使用几个常用ADB shell 命令. 首先我们得明白什么是adb.exe ADB -Android Debug Bridge, 是 Android sdk ...
- 国内外著名B2C系统介绍兼比较ASP.NET和PHP
国内外著名B2C系统介绍兼比较ASP.NET和PHP 2010-06-08 11:44 来源: 我来投稿 我要评论 中介交易 SEO诊断淘宝客 站长团购 云主机 A5外包 国内外著名 ...
- machine learning----->什么是机器学习
1.概述: 学习一门学问的第一步就是要了解这门学问到底是什么,它可以被用来干什么. 本文罗列了学习machine learning的过程中看到的一些写得比较好的文章以及读完这些文章之后对机器学习的初步 ...