关于媒体查询

最新推荐文章于 2023-08-01 18:06:30 发布

会开花的树-

最新推荐文章于 2023-08-01 18:06:30 发布

阅读量1k

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/u013830811/article/details/50464778

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于媒体查询

css根据不同的设备选择加载不同的样式。 HTML4和CSS2开始可以通过<link>标签的 media 属性为样式表指定设备类型，有八种，screen 和 print 是两种最常见的媒体类型。 1、根据设备类型选择样式。下面的代码表示设备是屏幕时，加载screen.css。设备是打印机时，加载print.css。screen 适用于计算机彩色屏幕。print 适用于打印预览模式下查看的内容
复制链接

扫一扫