css上下边距自适应

CSS是前端开发必不可少的技能，在页面布局中，上下边距的控制是常见的需求。但是，在响应式设计中，我们希望页面可以自适应于不同的设备尺寸，如何让上下边距也自适应呢？

/* CSS代码 */
.box {
    margin-top: 10%;
    margin-bottom: 10%;
} 

通过设置百分比的上下边距，我们可以使元素在不同设备上展现出不同的表现。但是需要注意的是，上下边距的百分比是相对于父元素的高度计算的。

另一种方式是使用CSS中的calc()函数，通过计算来实现自适应的上下边距。

/* CSS代码 */
.box {
    margin-top: calc(10% + 20px);
    margin-bottom: calc(10% + 20px);
} 

在这个例子中，我们使用了calc()函数来计算上下边距的值，并在值后加上一个像素的常量，以防止在某些情况下出现不可预知的情况。使用calc()函数可以使上下边距的大小精准地计算，适应于各种设备的分辨率。

当然，在响应式设计中，不同的需求需要选择不同的解决方案。上面提到的这两种方式仅是其中的两个常用方法，还有许多其他的方式可以实现自适应的上下边距。在实际开发中，需要根据具体情况进行选择。