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

Question

我在 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>

Answer 1

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

也许可以试试这样：

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

Answer 2

我将您的 html 与 css 分开并进行了一些更改，使用 % 而不是固定宽度。

当然，您也可以对响应式网站使用媒体查询

.column {
  box-sizing: inherit;
  display: inline-block;
  margin-bottom: 0em;
  margin-top: 0em;
  vertical-align: middle;
  width: 100%;
}

.margin-top {
  margin-top: 1.6rem;
}

.centered {
  box-sizing: inherit;
  text-align: center;
}

.btn {
  -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 1rem;
  pointer-events: all;
  position: relative;
  text-decoration-line: none;
  text-transform: uppercase;
  vertical-align: middle;
  width: 80%;
}

<div class="column">
  <div class="margin-top centered">
    <a class="btn" href="#" style="">
        Text Here
      </a>
   </div>
</div>

希望对您有所帮助。

Answer 3

最快最简单的解决方案是使用 bootstrap 网格系统。这是您的按钮的修改版本 html.

<div class="container" style="margin:10px">
  <div class="row">
    <div class="col-md-6">
      <a class="btn" href="#">New</a>
    </div>
  </div>
</div>

这是 (https://codepen.io/faaiz/pen/WJBdOy) codepen link

Answer 4

您可以使用以下代码：

<div class="container">
  <h2>Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-block">Button 1</button>
  <button type="button" class="btn btn-default btn-block">Button 2</button>

  <h2>Large Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button>
  <button type="button" class="btn btn-default btn-lg btn-block">Button 2</button>

  <h2>Small Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button>
  <button type="button" class="btn btn-default btn-sm btn-block">Button 2</button>
</div>

https://jsfiddle.net/0vu83eru/3/

您始终可以像这样使用网格系统：

<div class="container">
            <div class="row">
                <div class="col-xs-12  col-sm-6 ">
                    <button class="btn btn-primary btn-block">Click me!</button>
                </div>
            </div>
        </div>

xs 适用于超小型移动设备，因为您要求以移动用户屏幕的大小来管理它。对于 bootstrap 4 将 col-xs-12 替换为 col-12。

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

Make button size same as screen width

html

css

blogger