pc端媒体查询

最新推荐文章于 2024-07-25 15:47:15 发布

@小朱呀路

最新推荐文章于 2024-07-25 15:47:15 发布

阅读量589

点赞数

文章标签：媒体 css css3

本文链接：https://blog.csdn.net/weixin_45441173/article/details/127436744

版权


@media screen and (min-width: 0px)and (max-width: 600px) {
    .box {

        &-left,
        &-center,
        &-right {
            width: 100%;
            padding: 10px;
            height: 10%;
            box-sizing: border-box;

            div {
                width: 50%;
                height: 100%;
                background: red;

            }
        }
    }
}

@media screen and (min-width: 600px)and (max-width: 800px) {
    .box {

        &-left,
        &-center,
        &-right {
            width: 100%;
            padding: 10px;
            height: 10%;
            box-sizing: border-box;


            div {
                width: 100%;
                height: 100%;
                background: red;

            }
        }
    }
}

@media screen and (min-width: 800px) and (max-width: 959px) {
    .box {

        &-left,
        &-center,
        &-right {
            width: 100%;
            padding: 10px;
            height: 10%;
            background: #000;
            box-sizing: border-box;

            div {
                // width: 50%;
                width: (200/@size);

                height: 100%;
                background: red;

            }
        }
    }
}


@media screen and (min-width: 960px) and (max-width: 1023px) {}

@media screen and (min-width: 1024px) and (max-width: 1049px) {}

@media screen and (min-width: 1050px) and (max-width: 1151px) {}

@media screen and (min-width: 1152px) and (max-width: 1279px) {}

@media screen and (min-width: 1280px) and (max-width: 1359px) {}

@media screen and (min-width: 1360px) and (max-width: 1366px) {}

@media screen and (min-width: 1400px) and (max-width: 1439px) {}

@media screen and (min-width: 1440px) and (max-width: 1599px) {}

@media screen and (min-width: 1680px) {}