媒体查询

媒体查询免费看

媒体查询的语法是什么,媒体查询的逻辑操作符,媒体查询的参数

2018-09-09侠课岛    初级拔高       

前端/前端/响应式网站基础入门 15     0     4852

上面几章我们主要是从理论和概念上讲解了一下响应式网站构建的基本知识,下面我们将侧重于实战,来用代码逐一体验一下构建响应式网站的技术细节.

媒体查询语法

媒体查询包含一个可选的媒体类型和,满足CSS3规范的条件下,包含零个或多个表达式,这些表达式描述了媒体特征,最终会被解析为true或false.

如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型,并且所有的表达式的值都是true,那么该媒体查询的结果为true.当媒体查询为true时,其对应的样式表或样式规则就会遵循正常的级联规则进行应用。即使媒体查询返回false,link标签指向的样式表也将会被下载(但是它们不会被应用)

示例:

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {

}
</style>

媒体查询的逻辑操作符

你可以使用逻辑操作符,包括not、and和only等,构建复杂的媒体查询。

and操作符用来把多个媒体属性组合成一条媒体查询,对成链式的特征进行请求,只有当每个属性都为真时,结果才为真。

not操作符用来对一条媒体查询的结果进行取反。

only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式,这对于防止让选中的样式在老式浏览器中被应用到。若使用了not或only操作符,必须明确指定一个媒体类型。

示例:

@media (min-width: 700px) and (orientation: landscape) { ... }

如果你想在横屏时应用这个,你可以使用 and 操作符合并媒体属性,上述代码表示可视区域不小于700像素宽度并且是横屏时有效

媒体查询参数

介绍完媒体查询的基本语法,下面我们来总结一下媒体查询的参数以及作用:

参数 功能
width 浏览器可视宽度
height 浏览器可视高度
device-width 设备屏幕的宽度
device-height 设备屏幕的高度
orientation 检测设备目前处于横向还是纵向状态
aspect-ratio 检测浏览器可视宽度和高度的比例
device-aspect-ratio 检测设备的宽度和高度的比例
color 检测颜色的位数
color-index 检查设备颜色索引表中的颜色,他的值不能是负数
monochrome 检测单色楨缓冲区域中的每个像素的位数
resolution 检测屏幕或打印机的分辨率
grid 检测输出的设备是网格的还是位图设备

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

15

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?