更改选择选项字体大小

Question

我想更改select元素的字体大小。 Web视图一切正常，但如果我尝试在移动设备上查看它看起来比预期的要大。任何人都可以提供如何解决这个问题的想法。下面是将字体大小更改为1.1em后的选择屏幕截图

以下是我用于样式和html标记的代码

select.form-control {
  font-size: 1.1em;
  height: 1.2em;
  -webkit-appearance: none;
}

<div class="row">
  <div class="col-xs-12">
    <div>{{ _('Sort by') }}</div>
    <div>
      <select class="form-control" name="sort_by">
                     <option value=''>any</option>
                     <option value='1'>1</option>
                     <option value='2'>2</option>
                </select>
    </div>
  </div>
</div>

Answer 1

您可以使用媒体查询在较小的屏幕上更改字体大小。

@media screen and (max-width: size){
    select.form-control {
        font-size: smallerfontsize;
    }
}

Answer 2

单位em Relative to the font-size of the element (2em means 2 times the size of the current font)

在开发移动设备时，请查看DP（设备像素）单元。

Answer 3

您可以添加媒体查询

<style>
select.form-control {
  font-size: 1.1em;
  height: 1.2em;
  -webkit-appearance: none;
}
@media screen and (max-width: 768px) {
    select.form-control {
      font-size: 10px;

    }
}
</style>