如何让Blogger博客按钮宽度适配屏幕尺寸？

这问题我太熟悉了！你当前的代码里，外层容器和按钮都用了固定像素宽度（比如width: 650px、width: 537px），移动端屏幕宽度普遍小于这个值，自然就会超出屏幕范围。给你两个实用的调整方案，快速搞定适配：

方案1：用百分比宽度+最大宽度实现自适应（推荐） #

把固定像素宽度换成width: 100%，同时用max-width限制大屏下的最大宽度，这样按钮会自动适配屏幕宽度，又不会在大屏上太宽。修改后的代码如下：

<div class="column" style="box-sizing: inherit; display: inline-block; margin-bottom: 0em; margin-top: 0em; padding-left: 1rem; padding-right: 1rem; vertical-align: middle; max-width: 650px; width: 100%;"> 
  <div class="margin-top centered" style="box-sizing: inherit; margin-top: 1.6rem; text-align: center;"> 
    <a class="btn" href="Link-Here" style="-webkit-tap-highlight-color: transparent; background-color: #00bd9a; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px; box-sizing: inherit; color: white; cursor: pointer; display: inline-block; height: 42px; letter-spacing: 0.5px; line-height: 42px; padding: 0px 1.5rem; pointer-events: all; position: relative; text-decoration-line: none; text-transform: uppercase; vertical-align: middle; max-width: 537px; width: 100%;">Text Here</a> 
  </div> 
</div>

关键修改点： #

• 外层.column：把width: 650px改成max-width: 650px; width: 100%，确保容器在小屏占满宽度，大屏不超650px
• 按钮.btn：把width: 537px改成max-width: 537px; width: 100%，按钮会随容器宽度自适应
• 按钮的左右内边距从3rem改成1.5rem（可选）：避免小屏内边距过大导致文字挤压，你可以根据需求调整

方案2：用媒体查询针对移动端单独调整 #

如果需要更精准控制不同屏幕尺寸的表现，可以添加媒体查询（把样式移到