要使用CSS制作响应式提示框，需要先定义一个类并设置其中的属性。其中，重要关键字包括“媒体查询”、“弹性布局”和“伸缩盒子”。
首先，使用媒体查询来检测设备的屏幕大小。例如，可以将媒体查询设置为以下代码：
@media screen and (max-width: 600px) { / 这里添加样式 / }
接下来，需要使用弹性布局（flexbox）来确保提示框在不同设备上的排版都能够顺畅进行。通过在类中设置“display:flex”，即可对元素进行弹性布局。
最后，在类中增加一些样式，如背景颜色、字体颜色、边框等等，来最终实现提示框的外观效果。对于内容的对齐、位置等也可以使用伸缩盒子（flex container）或伸缩项（flex item）进行进一步的调整。
此外，为了使提示框更具有响应性，还可以在媒体查询内设置其他属性，如字体大小、行高、边距等等。
最终的HTML和CSS代码可能如下所示，其中以红色高亮显示了关键字：
HTML代码：
<div class="alert-box">这是一个提示框！</div>CSS代码：
.alert-box {
background-color: #FFF2CC;
border: 1px solid #F8C82B;
color: #9F6000;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 600px) {
.alert-box {
font-size: 12px;
margin-top: 10px;
margin-bottom: 10px;
}
}以上就是使用CSS制作响应式提示框的基本方法，通过媒体查询、弹性布局和伸缩盒子等技术，可以很好地适应不同大小的设备屏幕。