博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

@media 响应式布局

Posted on 2018-09-10 23:08  alex_hrg  阅读(195)  评论(0)    收藏  举报

能根据宽 高 屏幕等一些标签的变化来应用不同的样式叫响应式，如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @media (min-width: 800px) {
            .c1{
                background: blue;
                height:30px;
            }
        }
        @media (min-width: 1000px) {
            .c1{
                background: red;
                height:38px;
            }
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>