task1-jiugongge.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) 
    and (max-device-width: 600px)" href="smallScreen.css" />
    <title>九宫格</title>
    <style> 
    
     
        .box {
            width:500px;
            height:500px;
            margin: 0 auto;     
            position: relative;
         }   
          
        .box div{     
            width:31%;
            height:31%;
            background-color: #FDA410;
            margin:1%;
            border-radius: 10px;
            float:left;
           
        }  
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>   

   
</body>
</html>

 <!-- <head>中用link标签引入了自动检测屏幕大小进行调整的样式表（CSS3引入的Media Query模块）；
     除此之外也可以选择在外部css中使用：
      @import url("tinyScreen.css") screen and(max-device-width: 400px);  -->