精细的媒体查询。相对于其他的媒体查询,更加精细

/* 超大屏幕(4K 及以上显示器) */
@media (min-width: 2560px) {
    .c-bor-item {
        width: calc(100% / 12);
        height: 120px;
        padding-right: 15px;
        margin-bottom: 20px;
    }
}

/* 大屏幕(宽屏桌面显示器) */
@media (min-width: 1920px) and (max-width: 2559px) {
    .c-bor-item {
        width: calc(100% / 10);
        height: 100px;
        padding-right: 12px;
        margin-bottom: 18px;
    }
}

/* 中等大屏幕(普通桌面显示器) */
@media (min-width: 1600px) and (max-width: 1919px) {
    .c-bor-item {
        width: calc(100% / 9);
        /* 保持默认高度,可不写 height */
        /* height: 92px; */
        padding-right: 11px;
        margin-bottom: 16px;
    }
}

/* 中等屏幕(笔记本电脑) */
@media (min-width: 1366px) and (max-width: 1599px) {
    .c-bor-item {
        width: calc(100% / 8);
        height: 88px;
        padding-right: 10px;
        margin-bottom: 15px;
    }
}

/* 小屏幕(部分笔记本电脑、平板电脑横屏) */
@media (min-width: 1024px) and (max-width: 1365px) {
    .c-bor-item {
        width: calc(100% / 7);
        height: 84px;
        padding-right: 9px;
        margin-bottom: 14px;
    }
}

/* 平板电脑竖屏 */
@media (min-width: 768px) and (max-width: 1023px) {
    .c-bor-item {
        width: calc(100% / 5);
        height: 78px;
        padding-right: 8px;
        margin-bottom: 13px;
    }
}

/* 手机横屏 */
@media (min-width: 576px) and (max-width: 767px) {
    .c-bor-item {
        width: calc(100% / 4);
        height: 72px;
        padding-right: 7px;
        margin-bottom: 12px;
    }
}

/* 普通手机竖屏 */
@media (min-width: 375px) and (max-width: 575px) {
    .c-bor-item {
        width: calc(100% / 3);
        height: 68px;
        padding-right: 6px;
        margin-bottom: 11px;
    }
}

/* 小尺寸手机竖屏 */
@media (min-width: 320px) and (max-width: 374px) {
    .c-bor-item {
        width: 50%;
        height: 64px;
        padding-right: 5px;
        margin-bottom: 10px;
    }
}

/* 超小尺寸手机竖屏 */
@media (max-width: 319px) {
    .c-bor-item {
        width: 100%;
        height: 60px;
        padding-right: 0;
        margin-bottom: 9px;
    }
}
posted @ 2025-02-20 12:48  我喜欢喝糖水  阅读(13)  评论(0)    收藏  举报
我喜欢喝糖水的博客友链:股票指标编程学习