如何在同一样式中设置两种尺寸，实现按钮的响应式屏幕适配？

当然可以让按钮根据屏幕尺寸切换大小，但直接在行内样式里没法设置多套尺寸，得用CSS媒体查询来实现响应式适配，下面是具体修改方法：

步骤1：简化按钮代码，移除行内固定宽度 #

先把按钮行内样式里的width: 384px删掉，也可以把所有样式移到CSS类里，让代码更整洁：

<a class="btn btn-rounded btn-responsive" id="btn1" href="<?php echo base_url('/newroute/nav/profissional/cadastrarcv'); ?>"> Editar/Atualizar </a>

步骤2：添加媒体查询样式 #

在页面的<style>标签或者外部CSS文件里添加以下样式，根据不同屏幕宽度设置按钮尺寸：

/* 默认桌面端样式 */
.btn-responsive {
  margin-top: 10px;
  margin-left: 10px;
  width: 384px;
}

/* 平板屏幕（宽度≤768px） */
@media (max-width: 768px) {
  .btn-responsive {
    width: 280px;
  }
}

/* 手机屏幕（宽度≤480px） */
@media (max-width: 480px) {
  .btn-responsive {
    width: calc(100% - 20px); /* 占满屏幕宽度，减去左右margin */
    margin-right: 10px;
  }
}

补充说明 #

• 媒体查询的宽度阈值（768px、480px）可以根据你的需求调整，也可以添加更多断点适配更多设备
• 如果你的项目用了Bootstrap，也可以直接用它的响应式宽度类（比如w-100、w-md-auto）快速实现，但自定义媒体查询能更精准控制尺寸

内容的提问来源于stack exchange，提问作者Ely Gabriel