css3媒体查询Medai Queries小例

最新推荐文章于 2024-04-16 00:00:00 发布

xuanwuziyou

最新推荐文章于 2024-04-16 00:00:00 发布

阅读量691

点赞数

分类专栏： Web前端技术

本文链接：https://blog.csdn.net/xuanwuziyou/article/details/48109707

版权

Web前端技术专栏收录该内容

115 篇文章 2 订阅

订阅专栏

当（浏览器）窗口宽度小于400px时，三个列每列占满全部宽度，边框是蓝色；

当（浏览器）窗口宽度在400px到1000px之间时，排三列，中间列宽度自适应，边框是红色；

当（浏览器）窗口宽度大于1000px时，三个列并列显示，每个宽度固定，边框是绿色

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>媒体查询小例</title>
    <!--<link href="stylesheet1.css" rel="stylesheet" media="all and (min-width: 1000px)" />
    <link href="stylesheet2.css" rel="stylesheet" media="all and (min-width: 400px) and (max-width: 1000px)" />
    -->
    <style>
        @media all and (max-width :400px){
            #parent>div{
                border:1px solid blue;
                padding:20px;
            }
        }

        @media all and (min-width: 1000px){
            #parent>div{
                border:1px solid green;
                padding:20px;
            }
            #parent{
                display: box;
                display: -moz-box;
                display: -webkit-box;
            }
            #left{
                width: 200px;
            }
            #center {
                width: 400px;
            }
            #right{
                width: 400px;
            }
        }
        @media all and (min-width: 400px) and (max-width: 1000px){
            #parent>div{
                border:1px solid red;
                padding:20px;
            }
            #parent{
                display: box;
                display: -moz-box;
                display: -webkit-box;
            }
            #left{
                width: 300px;
            }
            #center {
                -moz-box-flex:1;
                -webkit-box-flex:1;
                box-flex:1;
            }
            #right{
                width: 300px;
            }
        }

    </style>
</head>
<body>
 <h1>媒体查询小例</h1>
<div id="parent">
    <div id="left">
        我是第一个div    始终坚持人民利益至上，是由社会主义初级阶段的主要矛盾决定的。
    </div>
    <div id="center">
        我是第二个div    始终坚持人民利益至上，是由社会主义初级阶段的主要矛盾决定的。始终坚持人民利益至上，是由社会主义初级阶段的主要矛盾决定的。始终坚持人民利益至上，是由社会主义初级阶段的主要矛盾决定的。
    </div>
    <div id="right">
        我是第三个div     始终坚持人民利益至上，是由社会主义初级阶段的主要矛盾决定的。始终坚持人民利益至上，是由社会主义初级阶段的主要矛盾决定的。始终坚持人民利益至上，是由社会主义初级阶段的主要矛盾决定的。主要矛盾是人民日益增长的物质文化需要同落后的社会生产之间的矛盾。        我是第三个div   始终坚持人民利益至上，是由社会主义初级阶段的主要矛盾决定的。始终坚持人民利益至上，是由社会主义初级阶段的主要矛盾决定的。始终坚持人民利益至上，是由社会主义初级阶段的主要矛盾决定的。主要矛盾是人民日益增长的物质文化需要同落后的社会生产之间的矛盾。

    </div>
</div>
</body>
</html>

小于400px时：

在400px到1000px之间时：

大于1000px时：

xuanwuziyou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3媒体查询Medai Queries小例

当（浏览器）窗口可见宽度小于400px时，三个列每列占满全部宽度，边框是蓝色；当（浏览器）窗口可见宽度在400px到1000px之间时，排三列，中间列宽度自适应，边框是红色；当（浏览器）窗口可见宽度大于1000px时，三个列并列显示，每个宽度固定，边框是绿色代码：媒体查询小例 --> @media all
复制链接

扫一扫

专栏目录