CSS3中的多媒体查询

最新推荐文章于 2023-09-22 17:49:26 发布

Eternal_tyq

最新推荐文章于 2023-09-22 17:49:26 发布

阅读量1k

点赞数

分类专栏：前端文章标签： css3

本文链接：https://blog.csdn.net/Eternal_tyq/article/details/78598024

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

媒体查询可用于检测很多事情，例如：
•viewport(视窗) 的宽度与高度
•设备的宽度与高度
•朝向 (智能手机横屏，竖屏) 。
•分辨率

写多媒体查询的方式有两种：
1.在HTML文件中头部链接不同的适应对应屏幕大小的css文件。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="pc.css" media="all and (min-width:992px)"/>
    <link rel="stylesheet" href="pad.css" media="all and (max-width:991px) and (min-width:768px)"/>
    <link rel="stylesheet" href="phone.css" media="all and (max-width:767px)"/>
</head>
<body>

</body>
</html>

当用户屏幕页面尺寸改变时，多媒体查询功能会直接根据用户界面尺寸的变化来选择调用其适用的css文件。

2.在写某条需要随着屏幕尺寸改变而变化的样式时，直接在此条样式内应用多媒体查询代码。

@media all and (max-width: 768px){
    body{
        background: yellow;
    }
}
@media all and (min-width: 769px) and (max-width: 991px){
    body{
        background:darkred;
    }
}
@media all and (min-width: 992px){
    body{
        background: blueviolet;
    }
}

Eternal_tyq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3中的多媒体查询

媒体查询可用于检测很多事情，例如： •viewport(视窗) 的宽度与高度 •设备的宽度与高度 •朝向 (智能手机横屏，竖屏) 。 •分辨率写多媒体查询的方式有两种： 1.在HTML文件中头部链接不同的适应对应屏幕大小的css文件。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title><
复制链接

扫一扫