lovecoding
/
vipAllDay


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243
							<!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>
        #box {
            width: 300px;
            height: 300px;
            background: #f00;
        }
        @media screen and (min-width: 400px) and (max-width:414px) {
            #box {
                background-color: blue;
            }
        }
    </style>
</head>
<body>
    <!-- 
        作用:媒体查询通过条件来告诉浏览器如何为指定的视图渲染页面
        @media mediaType and|only|no (media feature) {
            ...样式
        }
        注意:中间必须有空格(and来连接多个条件的运行语句，only表示仅有条件，通过被忽略，not表示非/除了某个尺寸)

         用 @media 开头 注意@符号
         mediatype 媒体类型
              all 所有设备
            screen 显示器 包括pc 手机端 移动端
         关键字 and not only
         media feature 媒体特性 必须有小括号包含

        样式引入
          <link rel="stylesheet" media="screen and (min-width:375px)" href="./style.css"/>

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

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