媒体查询。

最新推荐文章于 2023-06-18 14:29:16 发布

lxl211

最新推荐文章于 2023-06-18 14:29:16 发布

阅读量649

点赞数

文章标签：媒体 css css3

本文链接：https://blog.csdn.net/lxllxl211/article/details/128387054

版权

媒体查询( Media Query )是CSS3新语法
使用@media查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
注意点：
用 @media开头。注意@符号mediatype媒体类型
关键字and not only
media feature 媒体特性必须有小括号包含

1.mediatype查询类型
将不同的终端设备划分成不同的类型，称为媒体类型

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等

语法：
@media mediatype and/not/only (media feature) {
    csS-Code;
}

2.关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
and:可以将多个媒体特性连接到一起，相当于“且”的意思
not:排除某个媒体类型，相当于“非”的意思，可以省略。
only: 指定某个特定的媒体类型，可以省略

3.媒体特性
每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性
设置不同的展示风格。我们暂且了解三个注意他们要加小括号包含

值	解释说明
width	定义输出设备中页面可见区域的宽度
min-width	定义输出设备中页面最小可见区域宽度
max-width	定义输出设备中页面最大可见区域宽度

需求：在屏幕宽度是300px至499px之间，背景是红色，500px以上是黄色。

<style>
        /* 小的不会被彻底覆盖，大的却会 */
        @media screen and (min-width: 300px){
            body{
                background-color: red;
            }
        }
        @media screen and (min-width:500px){
            body{
                background-color: yellow;
            }
        }
    </style>
</head>
<body>
    
</body>

在这里插入图片描述

lxl211

关注

0
点赞
踩
0

收藏

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

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性。使用@media查询，可以针对不同的媒体类型定义不同的样式。注意@符号mediatype媒体类型。关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。设置不同的展示风格。and:可以将多个媒体特性连接到一起，相当于“且”的意思。not:排除某个媒体类型，相当于“非”的意思，可以省略。@media 可以针对不同的屏幕尺寸设置不同的样式。将不同的终端设备划分成不同的类型，称为媒体类型。only: 指定某个特定的媒体类型，可以省略。
复制链接

扫一扫

媒体查询。

“相关推荐”对你有帮助么？