关于媒体查询

来源：互联网发布：递归算法迷宫问题编辑：程序博客网时间：2024/05/17 01:23

css根据不同的设备选择加载不同的样式。
HTML4和CSS2开始可以通过<link>标签的 media 属性为样式表指定设备类型，有八种，screen 和 print 是两种最常见的媒体类型。
1、根据设备类型选择样式。下面的代码表示设备是屏幕时，加载screen.css。设备是打印机时，加载print.css。

screen 适用于计算机彩色屏幕。
print 适用于打印预览模式下查看的内容或者打印机打印的内容。

<link rel="stylesheet" type="text/css" media="screen" href="screen.css"><link rel="stylesheet" type="text/css" media="print" href="print.css" />

2、根据屏幕方向选择样式。

<!--纵向屏幕--><link rel="stylesheet" media="screen and (orientation: portrait)"  href="portraitscreen.css" /><!--不是纵向屏幕--><link rel="stylesheet" media="not screen and (orientation: portrait)"  href="portraitscreen.css" />

3.根据屏幕大小选择样式。
1）屏幕尺寸宽度大于等于800px:

@media all and (min-width: 800px) { ... }

下面是一个根据窗口调整div背景色的示例：

<!DOCTYPE html><html><head><meta charset="utf-8"><style> .mediaQuery{     width:200px;     height:200px;     }@media screen and (max-width:1000px){ .mediaQuery{     background-color: red; }} @media screen and (max-width:800px){ .mediaQuery{     background-color: black;     color:white; } }}</style></head><body> <div class="mediaQuery">    <p>当宽度小于1000px时，我会变成红色</p><p>    当宽度小于800px时，我会变成黑色</p> </div></body></html>

4.媒体查询的写法
1）直接在link标签里面使用媒体查询，按需加载不同的css文件：
使用media属性

<link rel="stylesheet" media="screen and (min-width:100px) and (orientation:portrait) href="css1.css" />

2）在CSS文件内部使用媒体查询：
如例，在相关样式外面嵌套一层媒体查询：

 .mediaQuery{     width:200px;     height:200px;     }@media screen and (max-width:1000px){ .mediaQuery{     background-color: red; } @media screen and (max-width:800px){ .mediaQuery{     background-color: black;     color:white; }

0 0