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

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

很多人在不了解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 就满足条件。本例中,样式会应用于所有的投影仪。

当然,在css3中,我们一般使用百分比来调整网站的页面,而不是像素,所以css3更佳适应多设备的流体式布局。

蚂蚁森林为我浇水吧!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: