WEB响应式布局学习(Part1)

最新推荐文章于 2024-07-14 09:37:06 发布

Wispertise

最新推荐文章于 2024-07-14 09:37:06 发布

阅读量258

点赞数

分类专栏：其他文章标签：前端 css 学习

本文链接：https://blog.csdn.net/Sunny_Deer/article/details/126651399

版权

其他专栏收录该内容

2 篇文章 0 订阅

订阅专栏

WEB响应式布局

媒体查询(@media)

根据不同的屏幕尺寸来改变显示方式与布局

使用方式:

#div0{
    width: 100px;
    height: 200px;
    background-color: aquamarine;
}

/* 
min-device-width : 最小宽度  
max-device-width : 最大宽度

在窗口宽度的宽度大小在200px和300px之间时，选用红色背景
*/
@media screen and (min-device-width:200px) and (max-device-width:300px) {
    #div0{
        background-color: red;
    }
}
/* 在窗口宽度的宽度大小在200px和300px之间时，选用蓝色背景
 */
@media screen and (min-device-width:301px) and (max-device-width:500px) {
    #div0{
        background-color: blue;
    }
}

@media常用参数

属性名称	作用
width、height	浏览器可视宽度、高度
device-width	设备屏幕宽度
device-height	设备屏幕高度

获取浏览器高度

#div0{
background-color: red;
    width: 200px;
    height: 200px;
}

/* 
    min-width:浏览器最小宽度.
    max-width:浏览器最大宽度
    浏览器宽度范围在500~700px时，背景颜色设为蓝色 */
@media screen and (min-width:500px) and (max-width:700px) {
    #div0{
        background-color: blue;
    }
}
/* 浏览器宽度范围在701~900px时，背景颜色设为黑色 */

@media screen and (min-width:701px) and (max-width:900px){
    #div0{
        background-color: black;
    }
}

根据宽度大小改变布局情况

<style>
    #div0 {
        width: 100%;
        /* height: 500px; */
    }

    #div0 div {
        float: left;
        height: 300px;
    }

    #div0 div:nth-child(1) {
        background-color: blue;
    }

    #div0 div:nth-child(2) {
        background-color: red;
    }

    #div0 div:nth-child(3) {
        background-color: yellow;
    }

    /* 一行显示三个div */
    @media screen and (min-device-width:900px) {
        #div0 div {
            width: 33.3%;
        }
    }

    /* 二行显示三个div */

    @media screen and (min-device-width:701px) and (max-device-width:900px) {
        #div0 div {
            width: 50%;
        }
    }

    /* 三行显示三个div */

    @media screen and (min-device-width:501px) and (max-device-width:700px) {
        #div0 div {
            width: 100%;
        }
    }
</style>

<body>
    <div id="div0">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>