lovecoding
/
W0407


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./xxx" media="screen and  (min-width:375px) and (max-width:414px)"> -->
    <style>
        #box{
            width: 200px;
            height: 200px;
            background: #00f;
        }
        @media screen and  (min-width:375px) and (max-width:414px) {
            #box {
                background: #f00;
            }
        }
        @media screen and  (min-width:500px) {
            #box {
                background: #ff0;
            }
        }
    </style>

    <!-- 
        //注意:中间必须有空格(and来连接多个条件的运行语句,only表示仅有条件,通过被忽略,not表示非/除了某个尺寸)
         用 @media 开头 注意@符号
         mediaType 媒体类型
         关键字 and not only
         media feature 媒体特性 必须有小括号包含

          媒体类型
            all 所有设备
            screen 显示器 包括pc 手机端 移动端
        样式引入
        <link rel="stylesheet" media="screen and (min-width:375px)" href="./style.css"/>

        <link rel="stylesheet" media="screen and (min-width:680px)" href="./style1.css"/>

     -->
</head>
<body>
    <div id="box"></div>
</body>
</html>