CSS的@media——媒体查询

最新推荐文章于 2024-06-19 23:47:23 发布

I'm Mr.C

最新推荐文章于 2024-06-19 23:47:23 发布

阅读量365

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_44849271/article/details/114128756

版权

CSS 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

CSS的@media与@media screen可以运用到网页自适应中。

@media与@media screen的区别

@media与@media screen在效果上是没区别的。但实际上是在于设备上的区别，@media screen中的CSS样式在打印机设备是无效的，而@media的CSS样式是可以运用在打印机设备的。

Demo教程:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    //设备宽度在500px内执行 (说白了就是 width<=500px执行这个@media的CSS样式)
        @media screen and (max-width: 500px){
            p{
                background-color: aqua;
            }
        }
    //设备宽度在600px外执行 (说白了就是 width>=600px执行这个@media的CSS样式)
        @media screen and (min-width: 600px){
            p{
                background-color: red;
            }
        }
    //设备宽度在700px至900px内执行 (说白了就是 700px<=width<=900px内执行这个@media的CSS样式)
        @media screen and (min-width: 700px) and (max-width:900px){
            p{
                background-color: yellow;
            }
        }
    </style>
</head>
<body>
    <div>
        <p>HELLO</p>
        <p>THIS IS INDEX PAGE</p>
        <p>NOW TEST @MEDIA</p>
    </div>
</body>
</html>

@media screen and () 中的screen是有其他属性的

screen	用于有屏幕的设备
speech	用于发声设备
all	用于所有设备
print	用于打印机设备

@media screen and (max-width)中的max-width也是可以有其他属性的

max-width	设备最大宽度(<=width) 执行
min-width	设备最小宽度(>=width)执行
max-height	设备最大高度(<=height) 执行
min-height	设备最小高度(>=height)执行

除了width、height，还有max-color与min-color,当然远远不止这几个，还有许多，小编就列出了常用的。

有什么问题欢迎大家补充！

I'm Mr.C

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS的@media——媒体查询

CSS的@media与@media screen可以运用到网页自适应中。@media与@media screen的区别@media与@media screen在效果上是没区别的。但实际上是在于设备上的区别，@media screen中的CSS样式在打印机设备是无效的，而@media的CSS样式是可以运用在打印机设备的。Demo教程:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF
复制链接

扫一扫

专栏目录