css3媒体查询-CSS3媒体查询的基本使用，不同多媒体风格的适配

bendan520 css

2023-08-26 0 794 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

CSS2 中的多媒体类型

CSS2中引入了@media规则，可以针对不同的媒体类型定制不同的样式规则。

例如：您可以为不同的媒体类型（包括显示器、便携式设备、电视机等）设置不同的样式规则。但这种多媒体类型不够友好，无法在许多设备上支持。

CSS3 多媒体查询

CSS3多媒体查询继承了CSS2多媒体类型的所有思想：CSS3不再搜索设备类型，而是根据设置自适应显示。媒体查询可用于衡量许多事物，例如：

视口（窗口）的长度和高度

设备长度和高度

方向（智能手机横向、纵向）。

解决

目前css3媒体查询css3媒体查询，苹果手机、安卓手机、平板电脑等很多设备都使用多媒体查询。

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>