css - 用于手机、平板电脑和桌面的 Bootstrap 网格布局

Question

我正在尝试为高尔夫评分 Web 应用程序创建一个更简单的用户界面，以便人们输入数据。原则是按下每个乐谱的大按钮，而不是输入乐谱。

我创建了一个额外的 CSS 文件来制作比默认按钮更大的按钮...

.btn-sq-lg {
  width: 150px !important;
  height: 150px !important;
}

.btn-sq {
  width: 100px !important;
  height: 100px !important;
  font-size: 10px;
}

.btn-sq-sm {
  width: 50px !important;
  height: 50px !important;
  font-size: 10px;
}

.btn-sq-xs {
  width: 25px !important;
  height: 25px !important;
  padding:2px;
}

目前我有以下内容，可以在桌面设备上正确显示(忽略“xs”网格单元，这是我在玩。我想要的“lg”网格单元格格式......)

<div class="row">
    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-2 col-lg-offset-1">
        <button type="button" class="btn btn-primary btn-sq">Blob</button>

    </div>
    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-2">
        <button type="button" class="btn btn-primary btn-sq">2</button>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        <button type="button" class="btn btn-primary btn-sq">3</button>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        <button type="button" class="btn btn-primary btn-sq">4</button>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        <button type="button" class="btn btn-primary btn-sq">5</button>
    </div>
</div>
<div class="row">
    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-2 col-lg-offset-1">
        <button type="button" class="btn btn-primary btn-sq">6</button>

    </div>
    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-2">
        <button type="button" class="btn btn-primary btn-sq">7</button>
    </div>
</div>

如何/什么等同于使相同的格式出现在移动设备上？

我可以根据需要使用备用(自定义)按钮大小，只是为要使用的语法寻找一个好的指导...

Answer 1

您需要使用媒体查询来根据屏幕大小更改按钮的大小。例如，如果您使用的是手机，那么您需要将按钮的宽度/高度更改为 25 像素。您可以为平板电脑使用 50 像素的宽度/高度，为更大的屏幕使用 100 像素。

例如，要处理手机，您可以将其添加到您的 css 文件中:

@media only screen and (max-width: 500px) {
    .btn-sq {
        width: 50px !important;
        height: 50px !important;
        font-size: 10px;
        background-color: yellow;
    }
}