css2中对屏幕视口的识别方法

2014-07-02 18:03:07 评论 780次浏览

很多人在不了解HTML5和css3,所以在响应式上面向采用css2的一些视口识别方案开实现，所谓的视口也就是页面的展示窗口大小，这里大家注意区分他与传统的像素区别，所以，这里我们就要先看下这个网页在用户展示窗口上所展示出的大小，这里我们来看css2是怎么识别视口大小的：

如果经常使用CSS 2 样式表，你就知道可以通过<link>标签的media 属性为样式表指定设备类型（如显示屏或打印机）。具体说来，就是在HTML 页面的<head>标签中插入一个如下面代码片段所示的link 标签：
<link rel="stylesheet" type="text/css" media="screen" href="screen-styles.css">
媒体查询则能使我们根据设备的各种功能特性来设定相应的样式，而不仅仅只针对设备类型。可以将媒体查询想象成对浏览器的提问。如果浏览器回答“是”，则应用样式；如果回答是“否”，则不应用样式。相对于在CSS 2 中能且只能问浏览器“你是一块显示屏吗？”，媒体查询能问的问题要多一点。例如，媒体查询可以问：“你是一块纵向放置的显示屏吗？”我们看看对应的实际代码：
<link rel="stylesheet" media="screen and (orientation: portrait)" href="portraitscreen.css" />
首先，媒体查询表达式询问了媒体类型（你是一块显示屏吗？），然后询问了媒体特性（显示屏是纵向放置的吗？）。任何纵向放置的显示屏设备都会加载portrait-screen.css
样式表，其他设备则会忽略该文件。在媒体查询的开头追加not 则会颠倒该查询的逻辑。例如，下面的代码就会颠倒前例中的效果，会使非纵向放置的显示屏设备加载样式文件：
<link rel="stylesheet" media="not screen and (orientation: portrait)" href="portraitscreen.css" />
也可以将多个表达式组合在一起。如，我们扩展一下前面的例子，限制只有视口宽度大于800 像素的显示屏设备才能加载文件。
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:800px)" href="800wide-portrait-screen.css" />
更进一步，还可以写一个媒体查询列表。查询列表中的任意一个查询为真，则加载文件。全部查询都不为真，则不加载。例子如下：
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:800px), projection" href="800wide-portrait-screen.css" />
这里有两点需要注意。第一，媒体查询之间使用逗号分隔。第二，你会注意到在projection 之后，没有and，也没有任何特性/值的组合。没有后续表达式，意味着只要是projection 就满足条件。本例中，样式会应用于所有的投影仪。

蚂蚁森林为我浇水吧！

发表评论取消回复