ブートストラップカルーセル。どのように携帯電話のヘッダーとインジケータを減らすために

Question

私はクロームのウィンドウをきつくするときに、カルーセルのキャプションと丸いインジケータのサイズは、モバイルとフルスクリーンで同じです。私は携帯電話の中で小さくなることが可能ですか？

私は悪い英語のための注意と感謝のために感謝します！

デスクトップ：

モバイル：

Answer 1

あなたはCSSプロパティの別の値を指定するには、メディアクエリを使用することができます。

• Bootstrap's media queries
• media queries for standard devices

たとえば

：それは可能である

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
@media (max-width: 767px) { 
 
    .carousel-caption h1 { /* Header */ 
 
    font-size: 20px; 
 
    } 
 
    .carousel-caption p { /* Paragraph */ 
 
    font-size: 12px; 
 
    } 
 
    .carousel-indicators li { /* Indicators */ 
 
    width: 8px; 
 
    height: 8px; 
 
    } 
 
    .carousel-indicators .active { /* Active indicator */ 
 
    width: 10px; 
 
    height: 10px; 
 
    } 
 
} 
 

 
@media (max-width: 480px) { 
 
    .carousel-caption h1 { /* Header */ 
 
    font-size: 16px; 
 
    } 
 
    .carousel-caption p { /* Paragraph */ 
 
    font-size: 10px; 
 
    } 
 
    .carousel-indicators li { /* Indicators */ 
 
    width: 6px; 
 
    height: 6px; 
 
    } 
 
    .carousel-indicators .active { /* Active indicator */ 
 
    width: 8px; 
 
    height: 8px; 
 
    } 
 
} 
 

 
.carousel img { 
 
    width: 100%; 
 
}

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="//placehold.it/900x300/c69/f9c/?text=First" alt=""> 
 
     <div class="carousel-caption"> 
 
     <h1>Header</h1> 
 
     <p>Paragraph.</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="//placehold.it/900x300/9c6/cf9/?text=Second" alt=""> 
 
     <div class="carousel-caption"> 
 
     <h1>Header</h1> 
 
     <p>Paragraph.</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="//placehold.it/900x300/69c/9cf/?text=Third" alt=""> 
 
     <div class="carousel-caption"> 
 
     <h1>Header</h1> 
 
     <p>Paragraph.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>