<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            height: 0;
        }
        @media screen and (min-width: 900px){
            .box{
                width: 200px;
                height: 200px;
                background-color: #ff0789;
            }
        }
    </style>
</head>
<body>
<div class="box"></div>
<!--
@media 检测媒体设备类型
all screen print ...
not 可以排除某种媒体设备类型
only 只有特定的媒体设备类型

@media screen and (min-width: 900px) {}
min-width:  大于这个值的时候显示这个样式 >=480
max-width:  小于这个值的时候显示这个样式 <=600
orientation portrait竖屏
orientation landscape横屏

-->
</body>
</html>