在HTML中当浏览器的宽度减少到768px以下时，顶部栏的高度变为50px。左侧栏消失，右侧宽度变为100%。请写出具体的CSS代码

要实现这样的布局变化，你可以使用媒体查询（Media Queries）结合CSS来达到效果。以下是一个简单的示例代码：

/* 默认样式 */
header {
  height: 100px; /* 默认高度 */
}
aside {
  display: block; /* 默认显示左侧栏 */
}
.right-side {
  width: calc(100% - 200px); /* 默认右侧宽度 */
}

/* 当浏览器宽度小于或等于768px时 */
@media (max-width: 768px) {
  header {
    height: 50px; /* 在宽度小于等于768px时改变高度 */
  }
  aside {
    display: none; /* 在宽度小于等于768px时隐藏左侧栏 */
  }
  .right-side {
    width: 100%; /* 在宽度小于等于768px时让右侧宽度变为100% */
  }
}

在这个例子中，`.right-side` 类的宽度使用了 `calc()` 函数来计算默认宽度。这假设你的页面中有其他元素（比如一个 `<aside>` 元素）占据了一定宽度（在这个例子中是200px），根据实际布局情况你可能需要调整这个值。

确保你的HTML结构中有相应的类名来应用这些样式。例如，你的HTML可能是这样的：

<header class="header">
  <!-- 页面顶部栏内容 -->
</header>
<aside class="left-side">
  <!-- 页面左侧栏内容 -->
</aside>
<div class="right-side">
  <!-- 页面右侧内容 -->
</div>