CSS3媒体查询基本用法，不同多媒体样式适配问题

老板上菜！

已于 2022-08-26 10:11:45 修改

阅读量616

点赞数

文章标签： css3 媒体 css

于 2022-08-26 10:05:31 首次发布

本文链接：https://blog.csdn.net/qq_55870308/article/details/126537388

版权

CSS2的多媒体类型

@media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。
例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。但是这些多媒体类型在很多设备上支持还不够友好。

CSS3的多媒体查询

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想：取代了查找设备的类型，CSS3 根据设置自适应显示。媒体查询可用于检测很多事情，例如：
viewport(视窗) 的宽度与高度
设备的宽度与高度
朝向 (智能手机横屏，竖屏) 。
分辨率
目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。

CSS3多媒体查询为了解决什么？

用很简洁的话来说就是：为了解决在不同多媒体上，展现给用户看的样式层面上，做不同css样式适配的这个问题。

CSS3多媒体类型

在这里插入图片描述

基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        width: 100%;
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgb(255, 166, 0);
    }
    /* 当浏览器宽度是500px - 800px  之间的时候，盒子的背景色为当前颜色 */
    @media screen and (max-width: 800px) and (min-width: 500px) {
        .box{
            width: 100%;
            height: 500px;
            background: rgb(102, 255, 0);
        }
    }
     /* 当浏览器宽度是0 - 500px  之间的时候，盒子的背景色为当前颜色 */
    @media screen and (max-width:500px) and (min-width: 0){
        .box{
            width: 100%;
            height: 500px;
            background: rgb(0, 217, 255);
        }
    }
</style>
<body>
    <div class="box">
        我是测试盒子
    </div>
</body>
</html>