时间戳

首页 > 解决方案 > 使按钮大小与屏幕宽度相同

html - 使按钮大小与屏幕宽度相同

问题描述

我在 Blogger 博客中使用此按钮代码。但问题是，在移动设备中，宽度会超出屏幕。如何使其适应用户的屏幕尺寸？

<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; width: 650px;">
    <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 3rem; pointer-events: all; position: relative; text-decoration-line: none; text-transform: uppercase; vertical-align: middle; width: 537px;">Text Here</a>
    </div>
</div>

标签： htmlcssblogger

解决方案

我通常会建议使用媒体查询来更改按钮的宽度。现在它被设置为一定的宽度，所以如果屏幕较小，它就会超出屏幕。通过一个简单的媒体查询，您可以说如果屏幕比 窄...px，则宽度为 100%。

也许尝试这样的事情：

@media only screen and (max-width: 600px) {
    btn {
        width: 100%;
    }
}

推荐阅读