简单地响应式布局----CSS3中的Media Query(媒介查询)

来源:互联网 发布:51单片机at指令 编辑:程序博客网 时间:2024/06/01 09:17
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><style >    @media screen and (min-width: 680px){   屏幕宽度大于680的布局        #div_1{            background-color: black;            height: 200px;            width: 200px;        }    }    @media screen and (min-width: 480px) and (max-width: 680px){  屏幕宽度大于480小于680的布局        #div_1{            background-color: aqua;            height: 400px;            width: 400px;        }    }    @media screen and (max-width: 480px){       屏幕宽度小于480的布局
        #div_1{            background-color: red;            height: 400px;            width: 400px;        }    }</style><body><div id="div_1"> </div></body></html>
0 0
原创粉丝点击