モバイルでフォントをリサイズ

Question

私は以下のロゴデザインを作った。大画面では正常に動作しますが、ウィンドウサイズを十分に小さくすると、ロゴの右側が切れてしまいます。私はそれが切り取られずにウィンドウのサイズを変更することを望みます。私はここでメディアのクエリを使用することができますが、私はここに何かを紛失しているように感じます。何かご意見は？

#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

あなたは携帯電話を検出し、

Mobile Device Detection in asp.net

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

Answer 2

Nopに、必要に応じて手動でサイズを増やすことができます。

1）JS

2）

Answer 3

はちょうどあなたがで変更を確認したいブレークポイントどちらで何のルールを変更するには、メディアクエリを使用Mediaqueries：あなただけの2つのオプションがあります。

MDN Using Media Queries & @Mediaと、ブートストラップのデフォルト設定：Bootstrap Media Queriesを参照してください。

例CSS

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

実施例：

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