肉渣教程

CSS 设备查询

上一节 下一节

CSS3 Media Query 设备查询

利用@media属性查询设备,最早出现在CSS2中,在CSS2中,当时的思路是查询设备的种类;而发展到CSS3中,关注点则迁移到查询设备的兼容性。

现在,通过Media Query(设备查询)可以检查很多东西:

  • 视窗(viewport)的宽度和高度
  • 设备(device)的宽度和高度
  • 方向(orientation)- 平板pad和手机当前是横向还是纵向显示
  • 设备分辨率(resolution)

当代潮流方向是:通过Media Query(设备查询)针对台式电脑、笔记本电脑、平板电脑、手机等不同设备而给予前端不同的样式表设置。(甚至是对iphone和安卓手机也有进一步区分)

浏览器兼容性

下表是每种浏览器针对@media的最低版本。

属性
@media 21.0 9.0 3.5 4.0 9.0

设备查询(Media Query)的语法

如下所示,设备查询(Media Query)的语法由1个设备种类(media type)和若干表达式构成;这些表达式用来判断true或false,以决定大括号内的CSS样式表是否生效。从而,针对不同的设备类型,则可以应用不同的样式表设置。

@media not|only mediatype and (expressions) {
    CSS-Code;
}


上述是设备查询使用内部样式表,当然,还可以通过设备查询使用不同的外部样式表,如下所示:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="media_type1.css">

CSS3 Media Types 设备种类

取值 描述
all 用于所有设备类型
print 用于打印机设备
screen 用于电脑屏幕、平板电脑、手机等
speech 用于阅读器

一般来说设备种类(media type)都会取值screen(呵呵,其他的似乎比较不常用啊),而真正比较吊炸天的是表达式中对相关设备特性(Media Features)进行布尔判断(也就是判断true/false)。


一些简单的示例

如下所示,这个示例中,如果浏览器的宽度等于480px或大于480px,其大括号内部所设置的CSS样式表则会生效,从而页面背景色变成红色;如果不满足该条件,则会显示原本代码中设置的背景色黑色,具体的请试试下面的案例吧~(运行例子的时候,记得自己用浏览器查看全部源码)

@media screen and (min-width: 480px) {
    body {
        background-color: Red;
    }
}

运行一下


再看一个案例吧,去试试~(运行例子的时候,记得自己用浏览器查看全部源码)

@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left: 216px;}
}

运行一下


Media Features

上面例子中只用到了max-width,那其他的设备特性呢?请看下表。

取值 说明
any-hover 是否有可能通过输入设备允许用户触发鼠标指针悬浮事件
(这里包括外界设备,不仅仅是基础设备)
any-pointer 输入设备是否有指针功能,如果有,那指针精度如何
aspect-ratio 视窗长高比
color 色彩位数
color-gamut 输出设备的色彩饱和度
color-index 设备可以显示出多少种颜色
grid 用来查询输出设备是否使用Grid布局
height 视窗(viewport)高度
hover 基础输入设备是否允许用户触发鼠标指针悬浮事件
(比如纯粹触屏就无法hover)
inverted-colors 浏览器或操作系统是否处于色彩倒置模式下
light-level 设备周围的光线强暗程度
max-aspect-ratio 视窗长高比的最大值
max-color 最大色彩位数
max-color-index 设备可以显示出多少种颜色的最大数目
max-height 最大视窗高度
max-monochrome 单色设备中的最大色彩位数
max-resolution 定义设备的最大分辨率
max-width 最大视窗宽度
min-aspect-ratio 视窗长高比的最小值
min-color 最小色彩位数
min-color-index 设备可以显示出多少种颜色的最小数目
min-height 最小视窗高度
min-monochrome 单色设备中的最小色彩位数
min-resolution 定义设备的最小分辨率
min-width 最小视窗宽度
monochrome 单色设备的色彩位数
orientation 视窗的显示方向(横向或纵向)
overflow-block 设备是如何处理block块级元素的内容溢出视窗范围
overflow-inline inline行内元素内容溢出视窗范围
可否以滚动的方式来查看溢出部分
pointer 基础输入设备是否包含指针功能,如果包含,精度如何
resolution 输出设备的分辨率,使用dpi或dpcm为单位
scan 输出设备的扫描功能
scripting 是否支持脚本(比如JavaScript脚本)
update 输出设备更新内容变化的速度
width 视窗(viewport)宽度

纸上得来终觉浅,绝知此事要躬行;多去试试呗!不过可以等到真正有需求时再去试验,上述的这些内容还是有点偏,以及在不断更新发展中,所以没必要太去深入挖掘。不要在正在发展而不够成熟或兼容性不够的细节知识上花太大精力。


CSS 设备查询

上一节 下一节