/* 基础样式 */

/* 响应式设计基础设置 */
@media only screen and (max-width: 768px) { /* 针对宽度小于768px的屏幕 */
    /* 调整较小屏幕上的导航栏样式 */
    .navbar .logo, .navbar a {
        padding: 10px 5px;
        margin: 0 10px;
        font-size: 14px;
    }
    
    /* 降低logo大小以适应窄屏幕 */
    .logo {
        font-size: 16px;
        top: 12px;
        left: 5px;
        padding: 5px; /* 内边距减少 */
        background-color: transparent; /* 让背景完全透明 */
    }

    /* 调整小屏幕的主内容样式 */
    .content {
        margin: 10px;
        padding: 10px;
    }

    /* Menu items might require alteration here too
    This is basic -- assuming you'll employ a toggle for a slide-in menu or similar */
}

/* 可根据需要，持续添加更多的屏幕尺寸来细化响应式行为 */
@media only screen and (max-width: 480px) { /* 针对更小的屏幕，如大多数手机 */
    .navbar .logo, .navbar a {
        padding: 8px 4px;
    }
    
    /* 在更小屏幕上可以隐藏部分不重要元素，或进一步简化布局等 */
    /* ... */
}