响应式页面

ps笔记

已于 2022-07-14 14:30:20 修改

阅读量971

点赞数

文章标签：前端

于 2022-07-14 11:57:11 首次发布

本文链接：https://blog.csdn.net/lv_suri/article/details/125781489

版权

同一套静态页面代码，在不同的设备中展现出不同的效果，并且可以自适应

监听终端设备。

媒体查询

通过@media定义样式，浏览器窗口满足指定条件，才会尹用此样式。

.box{

width:200px;

height:200px;

background-color:red;

}

小于指定宽度，样式生效

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

background-color:blue;

}

</head>
<style>
    .box{
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
    @media screen and (max-width:600px) {
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    }
</style>
<body>
    <div class="box"></div>
        
</body>
</html>

还可以设置多个条件：

@media screen and (min - width:600px ) and (max-width:900px){

.box{

background-color:blue;

}

</head>
<style>
    .box{
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
    @media screen and (min-width: 600px) and (max-width: 900px) {
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    }
</style>
<body>
    <div class="box"></div>
        
</body>
</html>

制作一个案例：

<style>
   .container{
        display: flex;
        width: 800px;
        margin:0 auto;
        background-color: #eee;
        justify-content: center;
    }
   .item{
        width: 200px;
        border: 1px solid red;
   }
   @media screen and ( max-width: 700px) {
        .container {
        width: 100%;
        flex-direction:column;
        }
    }
    .item{
        width: 100%;
    }
</style>
<body>
    <div class="container">
        <div class="item">
            <h1>文档</h1>
        </div>
        <div class="item">
            <h1>博客</h1>
        </div>
        <div class="item">
            <h1>视频</h1>
        </div>
    </div>
        
</body>
</html>