标签:控制 缓冲 大小 取反 直接 表示 font link dex
都知道bootstrap响应式布局很酷,但是是怎么实现的呢?其官网首页有提到这一切的功劳都是来自于CSS 媒体查询(Media Query)。
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
这也是我们很常见的引用方式,只不过很多时候我们都不太懂是什么意思。感觉又好像没有起太大作用的样子,就容易被我们忽视。
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
这里的描述的意思是:只有当当前设备是电脑屏幕,平板电脑,智能手机等才引入这个css样式文件
但是要在style下面才能引入,
<style type="text/css" media="screen"> 或者写成<style type="text/css" media="screen and (max-width: 600px)">
@import url("css/style.css");
</style>
这里描述的意思是:只有当当前设备是电脑屏幕,平板电脑,智能手机并且宽度小于等于600px的时候才引入这个css样式文件
bootstrap用的就是这种方法
@media print and (max-width: 600px) {
选择器 {
属性:属性值;
}
}
这里描述的意思是:只有当当前设备是打印机并且宽度小于或等于600px时候才引入这个样式文件
这里可能会疑问为啥max-width:600px 还表示小于600px呢?
因为这里是指要满足媒体类型(media type)和媒体特征(media feature)这两个条件才触发里面的代码,小于600px就是指最大没超过600px;
而满足的这两个条件并且和 and|not|only 这三关键字共同发生作用的过程叫媒体查询(media query)
针对不同的媒体使用css样式,例如只是控制个颜色、宽度等
@media media type and|not|only (media feature) {
CSS-Code;
}
针对不同媒体引用不同的css样式文件
<link rel="stylesheet" media="media type and|not|only (media feature)" href="mystylesheet.css">
媒体类型就是media tyep,通常的值有:
值 | 描述 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
screen | 用于电脑屏幕,平板电脑,智能手机等。 |
speech | 应用于屏幕阅读器等发声设备 |
媒体特征就是media feature,通常的值有:
值 | 描述 |
---|---|
aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 |
color | 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0 |
color-index | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0 |
max-color | 定义输出设备每一组彩色原件的最大个数。 |
min-color | 定义输出设备每一组彩色原件的最小个数。 |
max-color-index | 定义在输出设备的彩色查询表中的最大条目数。 |
min-color-index | 定义在输出设备的彩色查询表中的最小条目数。 |
device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的比率。 |
min-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最小比率。 |
max-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
device-height | 定义输出设备的屏幕可见高度。 |
device-width | 定义输出设备的屏幕可见宽度。 |
grid | 用来查询输出设备是否使用栅格或点阵。 |
height | 定义输出设备中的页面可见区域高度。 |
max-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
max-device-height | 定义输出设备的屏幕可见的最大高度。 |
max-device-width | 定义输出设备的屏幕最大可见宽度。 |
min-device-width | 定义输出设备的屏幕最小可见宽度。 |
min-device-height | 定义输出设备的屏幕的最小可见高度。 |
max-monochrome | 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。 |
max-resolution | 定义设备的最大分辨率。 |
min-aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的最小比率。 |
max-height | 定义输出设备中的页面最大可见区域高度。 |
max-width | 定义输出设备中的页面最大可见区域宽度。 |
min-height | 定义输出设备中的页面最小可见区域高度。 |
min-width | 定义输出设备中的页面最小可见区域宽度。 |
min-monochrome | 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 |
min-resolution | 定义设备的最小分辨率。 |
monochrome | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0 |
orientation | 定义输出设备中的页面可见区域高度是否大于或等于宽度。 |
resolution | 定义设备的分辨率。如:96dpi,300dpi,118dpcm |
scan | 定义电视类设备的扫描工序。 |
width | 定义输出设备中的页面可见区域宽度。 |
and关键字相当于&&
not正好是取反
only表示不支持媒体特征(Media feature)但又支持媒体类型(Media Type)的设备
not关键字实例:
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />
not关键字是用来排除某种制定的媒体类型,换句话来说就是用于排除符合表达式的设备。
only关键字实例
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
only用来定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。
其主要有:支持媒体特性(Media Queries)的设备,正常调用样式,此时就当only不存在;对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备,这样就会不读了样式,因为其先读only而不是screen;另外不支持Media Qqueries的浏览器,不论是否支持only,样式都不会被采用。
在Media Query中如果没有明确指定Media Type,那么其默认为all,如:
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css">
另外还有使用逗号(,)被用来表示并列或者表示或,如下
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (max-width:480px), screen and (min-width:960px)" />
标签:控制 缓冲 大小 取反 直接 表示 font link dex
原文地址:https://www.cnblogs.com/Juaoie/p/11441850.html