移动端开发笔记--css媒体查询
谈这个问题,主要是考虑应用移动端不同设备,不同屏幕,不同分辨率,甚至是考虑pc端的响应式布局。
css2就引入了media-dependent样式表,开发者可以利用他们为不同媒体类型创建独立样式表;
例如:
<style media="screen"></style>
或者将其添加至外联样式表标签:
<link media="screen" rel="stylesheet" href="style.css"/>
再或者使用@media标签讲样式添加至已有的样式表中:
@media print{
//add styles
}
media的值可以是以下几种:
---- all 所有媒体类型
---- aural 语音合成器
---- braille 盲文装置
---- embossed 分页盲文打印机
---- handheld 小型设备,通常为单色
---- print 纸张格式及“打印预览”
---- projection 投影仪
---- tty 有固定字符网格的电传打字设备
---- tv 具有低分辨率、色彩及声音的电视设备
---- screen 彩色电脑屏幕
就目前来讲,我们并不会遇到上面所列出的那么多媒体类型,screen是我们使用最多的类型。
在响应式布局的网页或者应用中,视觉呈现需要根据设备屏幕的大小的变化而做出改变,以展示最佳效果。
利用媒体查询,就可以编写css,自动将设计更改为提供不同屏幕大小的最佳UI体验。
当然我要应用的场景是移动设备,这里记录的也是css3规范中对媒体查询通过表达式进行的扩展。利用这些表达式,我们可以更精确的,更灵敏的在不同情况下使用不同的样式。因此下面的例子目前只能在ff,chrome,safari,opera中得到支持。
*媒体查询规则
@media all and (min-width: 800px) { ... }
所有最小水平屏幕宽度为800像素都应该使用如下css规则。
· @media all 是媒体类型,表示将该css应用于所有媒体类型
·(min-width:800px)是包含媒体查询的表达式,如果最小宽度为800像素,则为true,并告诉浏览器运行下列css
其中all可省略,表示应用于所有媒体类型
and也一样可选。
@media (min-width:800px) and (max-width:1200px) { ... }
当设备最小宽度为800px,最大宽度为1200px的时候应用下列css。
这里如果我们想检测手机或这平板设备是横向的还是纵向的,该如何呢?
@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }
可以使用orientation来检测设备当前的显示方向:,他有两个值,landscape(横向)和portrait(纵向)
链接表达式还有一个关键词or,可以理解为“||”,即逻辑或运算,条件中有一个为true,结果就为true
and跟你用“&&”一样,即逻辑与运算,条件中都为true,结果才为true
not逻辑非运算,举个例子:
@media (not min-width:800px) { ... }
表示:当最小宽度不是800像素时,会应用下列css。
最后差点忘了,还可以把表达式应用在link标签上,如下:
<link rel="stylesteet" href="style.css" media="only screen and (max-width:800px)"> <link rel="stylesteet" href="style.css" media="only screen and (max-width:800px) and (min-width:400px)">