多媒体 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            @media only screen and (min-width:1001px ) {
                #aa{
                    background-color: red;
                    font-size: 24px;
                }
            }
            @media only screen and (min-width:600px ) and (max-width:1000px) {
                #aa{
                    background-color: blue;
                    font-size: 18px;
                }
            }
            @media only screen and (min-width:400px )and (max-width:599px) {
                    #aa{
                        background-color: orange;
                        font-size: 12px;}
            }
            #aa{
                width: 200px;
                height: 200px;
            }
            
        </style>
    </head>
    <body>
        <div id="aa">
            下午有事
        </div>
        <div id="a1">
            学习java
        </div>
    </body>
</html>

 

posted @ 2018-04-03 12:22  韩凯  阅读(84)  评论(0)    收藏  举报