/* CSS代码实现 */
.button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: none;
border-radius: 4px;
color: #fff;
background-color: #008CBA;
cursor: pointer;
}
/* 媒体查询 */
@media screen and (max-width: 600px) {
.button {
font-size: 14px;
padding: 8px 16px;
}
}以上代码中，大家使用了一个名为.button的class，它包含了按钮的一些关键属性，例如padding、font-size、以及背景颜色等等。接下来，大家引入一个媒体查询的CSS语句，当设备的屏幕宽度小于或等于600像素时，按钮文本的字体大小和内边距都会发生变化。
现在，大家将.class应用到HTML中的一个按钮。这个按钮的HTML代码如下所示：
按钮上出现的文本可以根据实际需求进行更改。
最后，大家再次强调，在网站的设计过程中，必须将相应式布局视为一个关键因素，它将确保大家的网站在不同的设备上均能稳定地运行，并且用户体验得到优化。