面试题：CSS中padding、border与margin在响应式布局中的应用

Question

有一个网页布局，页面包含一个导航栏和一个主体内容区域。导航栏固定在顶部，主体内容区域根据不同屏幕宽度自适应布局。当屏幕宽度大于960px时，主体内容区域左右各有30px的margin，自身有20px的padding；当屏幕宽度在640px到960px之间时，主体内容区域左右margin变为15px，padding变为10px；当屏幕宽度小于640px时，主体内容区域去掉左右margin，padding变为5px。导航栏始终有5px的border-bottom，颜色为灰色。请写出实现该响应式布局的CSS代码。

Answer 1

/* 导航栏样式 */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    border-bottom: 5px solid gray;
}

/* 主体内容区域样式 */
.main-content {
    /* 默认样式，可被媒体查询覆盖 */
    margin: 0;
    padding: 5px;
}

@media (min-width: 640px) and (max-width: 960px) {
   .main-content {
        margin: 0 15px;
        padding: 10px;
    }
}

@media (min-width: 960px) {
   .main-content {
        margin: 0 30px;
        padding: 20px;
    }
}