CSS-18-媒体查询

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             div{

                 width: 1200px;

                 height: 100px;

                 background-color: #87CEEB;

             }

             /*当浏览器窗口小于960时*/

             @media only screen and (min-width: 641px) and (max-width: 960px) {

                 div{

                     width: 100%;

                     background-color: yellow;

                 }

             }

             /*当浏览器窗口小于640时*/

             @media only screen and (max-width: 640px) {

                 div{

                     width: 100%;

                     background-color: #9ACD32;

                 }

             }

             /*当浏览器窗口大于等于960时*/

             @media only screen and (min-width: 961px) {

                 div{

                     width: 100%;

                     background-color: #87CEEB;

                 }

             }

         </style>

     </head>

     <body>

         <div></div>

     </body>

 </html>
巴特西

CSS-18-媒体查询

最新文章

热门文章
