更改選擇選項字體大小

Question

我想更改我的select元素的字體大小。一切都可以與網頁視圖，但如果我嘗試在移動設備上查看它看起來比預期的更大。任何人都可以給我提供關於如何解決this.Below的想法是選擇的改變字體大小後的截圖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>