Größe der Schrift auf Handy ändern

Question

Ich machte ein Logo-Design unten. Auf großen Bildschirmen funktioniert es gut, aber wenn ich die Fenstergröße verkleinere, wird die rechte Seite des Logos abgeschnitten. Ich möchte, dass sie nicht abgeschnitten und stattdessen mit dem Fenster skaliert wird. Ich könnte hier einfach eine Medienabfrage verwenden, aber ich fühle mich, als würde ich hier etwas drastisch vermissen. Irgendwelche Gedanken?

#back { 
 
    background: white; 
 
    color: #fff; 
 
    padding-top: 150px; 
 
    overflow: hidden; 
 
} 
 
#back .title { 
 
    font-size: 7em; 
 
    color: #074f66; 
 
    margin-top: 0; 
 
} 
 
#back .title .highlight { 
 
    color: #eebf3f; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<section id='back'> 
 
    <div class="col-md-5 col-sm-4 col-xs-12"> 
 
    <div class='text-center'> 
 
     <h2 class="title">my<span class="highlight">Logo</span></h2> 
 
     <div class="bottom-spacer"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!--//col--> 
 
</section>

Answer 1

Sie konnten die mobilen und Erhöhen Sie die Größe manuell benötigt, wenn

Mobile Device Detection in asp.net

How do I detect a mobile browser in a .NET MVC3 application

Answer 2

Nop erkennen. Sie haben nur zwei Optionen:

1) JS

2) Mediaqueries

Answer 3

Nur eine Medien-Abfrage verwenden, unabhängig von Regeln zu ändern, an welchen auch immer Sie sehen möchten Stopp-Änderungen an.

Siehe MDN Using Media Queries & @Media zusammen mit Bootstraps Standardeinstellungen: Bootstrap Media Queries.

Beispiel CSS

@media (max-width: 767px) { 
    .title { 
    font-size: 4em; 
    color: red; 
    } 
} 

Arbeitsbeispiel:

.title { 
 
    font-size: 7em; 
 
    color: #074f66; 
 
    margin: 0; 
 
} 
 
.title .highlight { 
 
    color: #eebf3f; 
 
} 
 
@media (max-width: 767px) { 
 
    .title { 
 
    font-size: 4em; 
 
    color: red; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<h2 class="title text-center">my<span class="highlight">Logo</span></h2>