machinecat520
/
zj-Exercise


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
							<!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>Document</title>
    <style>

        /* 
            媒体特性
                width   视口的宽度
                height  视口的高度

                min-width   视口的最小宽度（视口大于指定宽度时生效）
                max-width   视口的最大宽度（视口小于指定宽度时生效）
        */

        /* @media (max-width:600px){
            body{
                background-color:#bfa;
            }
        } */

        /* 
            样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化
            一般比较常用的断点

            小于768     超小屏幕    max-width = 768px
            大于768     小屏幕      min-width = 768px
            大于992     中型屏幕    min-width = 992px
            大于1200    大屏幕      min-width = 1200px
        */

        /* @media(min-width:500px){
            body{
                background-color: #bfa;
            }
        } */

        /* @media (min-width:500px) and (max-width:700px){
            body{
                background-color: #bfa;
            }
        } */

        @media only screen and (min-width:500px) and (max-width:700px){
            body{
                background-color: #bfa;
            }
        }

        
        

    </style>
</head>
<body>
    
</body>
</html>