CSS媒体查询（media）详解_css media属性-CSDN博客

本文链接：https://blog.csdn.net/qq_45859670/article/details/114534464

文章目录

@media常用参数
适配不同设备，对应不同的css
对于低端浏览器的忽略
案例
媒体查询不起作用解答

@media常用参数

width、height 浏览器高度和宽度
device-width、device-height 设备高度和宽度

适配不同设备，对应不同的css

默认为 media=“all”

    <!-- 正常屏幕 -->
    <style media="screen">    

    </style>
    <!-- 打印机屏幕 -->
    <style media="print">

    </style>

外部导入css

  <link rel="stylesheet" href="screen.css" media="screen">
    <link rel="stylesheet" href="print.css" media="print">

或者

  @import url(screen.css) screen;
  @import url(print.css) print;

在同一个css文件中，进行对不同屏幕的设定
对处于宽度为100px以上的，进行设定

@media screen and (min-width: 100px){
    
}

对处于宽度为100px和1000px之间的，进行设定

@media screen and (min-width: 100px) and (max-width: 1000px){
    
}

对于横屏或者是100px至1000px之间的

@media screen and (min-width: 100px) and 
 (max-width: 1000px),(orientation: landscape)    {
 
 }

对于100px至1000px之外的屏幕

@media not screen and (min-width: 100px) and 
 (max-width: 1000px),(orientation: landscape)    {
 
 }

对于低端浏览器的忽略

@media only screen and (min-width: 100px) and 
 (max-width: 1000px),(orientation: landscape)    {
 
 }

案例

方式一

<!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>媒体查询案例</title>
</head>

<body>
    <div id="div_father">
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
    </div>
</body>

<style>
    #div_father {
        width: 100%;
        height: 400px;
    }

    #div_father div {
        float: left;
        height: 100px;
    }

    #div_father div:nth-child(1) {
        background-color: red;
    }

    #div_father div:nth-child(2) {
        background-color: green;
    }

    #div_father div:nth-child(3) {
        background-color: yellow;
    }

    @media screen and (max-width:400px) {
        #div_father div {
            width: 100%;
        }
    }

    @media screen and (min-width:401px) and (max-width:600px) {
        #div_father div {
            width: 50%;
        }
    }

    @media screen and (min-width:601px) {
        #div_father div {
            width: 33.33%;
        }
    }
</style>

</html>

方式二

方式一这种的都是在一个style里面，在进行划分
也可以多个上style进行划分

<style>
    '''
</style>
<style media="(max-width:600px)">
    '''
</style>
<style media="(min-width:601px) and (max-width:800px)">
    '''
</style>
<style media="(min-width:801px)">
   '''
</style>

方式三

<link rel="stylesheet" href="./media.css" media="(min-width:601px) and (max-width:800px)">

媒体查询不起作用解答

注意and的两边要有空格