媒体化查询

原创于 2017-11-23 09:53:03 发布 · 231 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#媒体化查询

Android开发专栏收录该内容

52 篇文章

订阅专栏

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <!--
            作者：2470674067@qq.com
            描述：device-width 适应设备宽度
                 inital-scale=1 页面加载的时候缩放程度
                 设置了报错的话可以删掉
        -->
        <meta name="viewport" content="width-device-width,inital-scale=1">
        <title>媒体化查询</title>

        <style type="text/css">
            .content {
                height: 100px;
                width: 1024px;
                background: red;
            }

            @media only screen and (min-width: 100px) and (max-width: 640px) {
                .content {
                    background: green;
                }
            }
        </style>
    </head>

    <body>
        <div class="content">
            hello
        </div>
    </body>

</html>