Pyx 的现代主题

自定义 主题
5

<redacted>

我想知道是否可以实现自适应缩放？我希望在右侧添加一个侧边栏组件。

CSS 
/* 获取用户头像宽度并设置广告容器的最大宽度 */

/* 广告容器样式 */
#list-area {
    display: flex;            /* 使用弹性盒布局排列广告 */
    flex-direction: column;   /* 垂直显示广告 */
    gap: 0;                   /* 移除广告图片之间的间距 */
    padding: 0;               /* 移除容器内边距 */
    margin: 0;                /* 确保广告容器周围没有额外边距 */
    max-width: 812px;         /* 将广告容器宽度限制在最大 812px（头像宽度：48px） */
}

/* 广告链接样式 */
.banner-ad {
    display: block;           /* 将广告容器设为块级元素 */
    width: 100%;              /* 确保广告容器占据 100% 宽度 */
    max-width: 100%;          /* 防止超过最大宽度 */
    margin: 0;                /* 移除广告容器之间的间距 */
}

/* 响应式广告图片样式 */
.ad-image {
    width: 100%;              /* 确保图片占据父元素的完整宽度 */
    height: auto;             /* 保持图片的原始宽高比 */
    max-width: 100%;          /* 防止图片超过容器的最大宽度 */
    display: block;           /* 修复图片底部出现空白的问题 */
    margin: 0;                /* 移除图片周围的额外空间 */
}

/* 响应式设计：根据大屏幕和小屏幕调整广告显示 */

/* 调整宽度小于 768px 的设备上的广告显示 */
@media (max-width: 768px) {
    #list-area {
        padding: 0;            /* 确保移动设备上没有额外内边距 */
    }

    .banner-ad {
        width: 100%;           /* 确保广告在小屏幕上占据完整宽度 */
    }

    .ad-image {
        width: 100%;           /* 确保图片适应容器宽度 */
        height: auto;          /* 保持图片的宽高比 */
    }
}

/* 在非常小的设备（例如竖屏模式的手机）上进一步调整广告图片 */
@media (max-width: 480px) {
    .ad-image {
        width: 100%;             /* 确保图片适应手机屏幕宽度 */
        max-width: 100%;         /* 将最大宽度设置为 100% 以避免过大 */
        height: auto;            /* 保持图片的宽高比 */
    }
}

<redacted>

1 个赞