移动端开发笔记--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)">

 

 

转载于:https://www.cnblogs.com/all-blue/p/3287492.html