您的位置：首页 > 其它

关于媒体查询

2016-01-05 19:41 399 查看

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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航