Ändern Sie die Option font-size

Question

Ich möchte die Schriftgröße meines Select-Elements ändern. Alles ist in Ordnung mit Web-Ansicht, aber wenn ich es auf dem Handy versucht, sieht es größer aus als erwartet. Kann mir jemand auf die Idee geben, wie this.Below zu beheben, ist der Screenshot der wählen, nachdem die Schriftgröße zu ändern 1.1em

Unten ist der Code ich für das Styling und der HTML-Markup verwendet

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

Sie können Medien Abfrage verwenden, um die Schriftgröße auf kleineren Bildschirmen zu ändern.

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

Answer 2

Das Gerät em Relative to the font-size of the element (2em means 2 times the size of the current font)

einen Blick auf DP nehmen (Device Pixel) Einheit, wenn für die mobile Entwicklung.

Answer 3

Sie können Medienabfrage

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