lovecoding
/
web0331


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041
							<!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="./style/xxxx" media="screen  and (min-width:375px) and (max-width:414px)">
    <style>
        #box {
            width: 2rem;
            height: 2rem;
            background: pink;
        }
        @media screen and (min-width:375px) and (max-width:414px) {
            #box {
                background: purple;
            }
        }
        @media screen and (min-width:768px){
            #box {
                background: red;
            }
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script src="./rem.js"></script>
    <!-- 
        媒体查询
        @media 设备 关键字 条件 {代码块}
        设备：
            screen:显示器 pc 手机
            all:所有设备
        关键字：
            and not only
        条件：
            min-xxx;max-xxx
    -->
</body>
</html>