响应式布局和弹性布局分别怎么实现

响应式布局和弹性布局都是实现页面适配不同屏幕尺寸的布局方式，以下是它们的实现方式：

1. 响应式布局实现方式：
响应式布局通过媒体查询来适应不同的屏幕尺寸。我们可以使用CSS3的@media规则来实现媒体查询，例如：

/* 当屏幕宽度小于等于 600px 时，应用以下样式 */
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

在媒体查询中，我们可以针对不同的屏幕尺寸来设置不同的样式，从而实现响应式布局。

2. 弹性布局实现方式：
弹性布局通过设置元素的宽度、高度、外边距、内边距等属性为相对单位，如百分比或者flex等，来适应不同的屏幕尺寸。例如：

.container{
  display: flex;
  justify-content: center;
  align-items: center;
}

这里的display:flex表示将container设置为弹性盒子，然后通过justify-content和align-items属性来设置弹性盒子内的元素居中对齐，从而实现弹性布局。

综上所述，响应式布局和弹性布局都是实现页面适配不同屏幕尺寸的布局方式，开发者可以根据具体的需求选择不同的方式进行实现。