lovecoding
/
VIP32


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box {
            width: 3rem;
            height: 3rem;
            background: #00f;
        }
        @media screen and (min-width:375px) and (max-width:414px) {
            #box {
                background: #f00;
            }
        }
        @media screen and (min-width:768px) {
            #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>
    <script src="./rem.js"></script>
</body>
</html>