标签：屏幕宽度 取反 情况 等于 nta cal 不同的 高级 布局
媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的.
简单的来讲媒体查询是一种用于修饰css何时起作用的语法.
Media Queries 的引入，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。(1)
既然媒体查询是用于控制样式的,而样式的使用无外乎如下几种规则:
link引入style标签style属性@import引入而显式的使用媒体查询声明样式我们有如下三种方法:
link引入时使用media属性style标签时添加media属性我们先来看看link的使用方式:
link标签使用媒体查询后基本的样子如下(1):
<link rel="stylesheet" type="text/css" href="swordair.css" media="screen and (min-width: 400px)">一旦使用了媒体查询修饰link标签后,就意味着符合媒体查询后这个样式就会被启用,同样的规则适用于style标签.
那么对于上面的那一句media="screen and (min-width: 400px)"就可以解释为:
当屏幕的宽度大于等于400px的时候应用这条样式规则.
上面的例子中我们可以看到多出了一个media属性,而media中内容就是媒体查询的语法,可以被如下解释:
一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。(2)
看起来很复杂,但是实际上一个媒体查询的声明就分为以下三个部分:
那么使用上方的例子来说media="screen and (min-width: 400px)"中screen就是媒体类型,
而后面的and被称作逻辑操作符,(min-width: 400px)则被称作媒体特性.
上文说道媒体查询在css2中就已经有了,所以有很多媒体类型是在css2时代提出的,其中就只有screen和all被广泛的使用,有很多都被删除掉了.
常使用的媒体类型css2制定
不常使用的媒体类型
css2.1被废弃掉的媒体类型(3)
| 名称 | 特性 |
|---|---|
| width | 可视宽度 |
| height | 可视高度 |
媒体特性一览:
https://developer.mozilla.org...
大家可以运行一下这个例子来感受一下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
html,body{
height: 100%;
}
body{
background-color: aqua;
}
</style>
<style media="screen and (min-width: 400px)">
body{
background-color: #000;
}
</style>
<title>test</title>
</head>
<body>
</body>
</html>在这个例子中屏幕宽度大于400像素的时候body的背景颜色是黑色,但是一旦低于400像素后就成为了青绿色.
一个媒体查询声明中可以由多个媒体查询组成(使用逗号分割),一个单独的规则是由如下的格式组成的:
| 类型 | 数量 | 默认值 |
|---|---|---|
| 媒体类型 | 0 / 1 | all |
| 媒体特性 | n(n!=0) | |
| 逻辑操作符 | n-1 |
也就是说一个媒体查询中可以存在多条规则,对于一个规则需要一个媒体类型(默认all)和n个媒体特性(可选),他们之间的连接使用逻辑操作符来连接.
当不填写媒体类型对应的默认规则:
上面的例子的媒体查询有如下内容screen and (width: 400px)如果你看过媒体特性一览表就会发现min-这个内容是没有提到的.
大部分媒体特性都是有前缀的,媒体特性前缀主要用于约束媒体特性的作用范围.
所谓的逻辑操作符说白了就是编程中的逻辑操作符,用于连接多个媒体特性表达式.
显示的逻辑操作符一共有两个:
注意:默认使用逗号分割的多个媒体查询就是or的写法,也就是说逗号就相当于or操作符
特殊的有一个:
实际使用中然并卵的功能
例子1:
screen and (min-width: 400px)宽度大于400像素的设备使用这个样式.
例子2:
(min-width: 700px) and (orientation: landscape)宽度大于700像素且屏幕为横屏的时候使用这个样式.
例子3:
handheld and (max-width:20em), screen and (max-width:30em)表示此CSS被应用于宽度小于20em的手持，或者宽度小于30em的屏幕.
所谓的条件规则组就是值媒体的声明不在link标签和style标签上,而是在css代码中,利用条件规则组我们可以将一块css代码在符合媒体查询的时候应用.
使用方式(BootStrap中的样式代码)
@media (min-width:768px) {
.lead {
font-size: 21px
}
}在这个例子中:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css" media="screen and (min-width: 400px)">
html,body{
height: 100%;
}
body{
background-color: aqua;
}
@media screen and (min-width: 400px){
body{
background-color: #000;
}
}
</style>
<title>test</title>
</head>
<body>
</body>
</html>在style标签上声明的属性和在内部的条件规则组媒体查询设计的一致,但是内部的条件规则组覆盖掉了外部style上的媒体查询.
可以看到他们实际上它们之间没有优先级,只有先后执行的顺序,后执行的规则会覆盖掉前面的规则.
(1)
http://www.swordair.com/blog/...
(2)
https://developer.mozilla.org...
(3)
https://developer.mozilla.org...
更多的详细的例子:
http://www.cnblogs.com/lguow/...
使用媒体查询注意的常见错误:
https://blog.csdn.net/qq_3755...
电脑分辨率对应的媒体查询:
https://blog.csdn.net/happyde...
在写例子的时候我使用到了两个浏览器最新的firefox和最新的chrome,有趣的事情是二者在style标签上使用media属性表现不同.
firefox中不写<meta name="viewport" content="width=device-width, initial-scale=1" />也是正常运行,但是chrome就不可以.
原文地址：https://segmentfault.com/a/1190000016895772
标签：屏幕宽度 取反 情况 等于 nta cal 不同的 高级 布局
原文地址：https://www.cnblogs.com/lalalagq/p/9902167.html
