ブートストラップの崩壊とそれがDOMに及ぼす影響について

Question

私のウェブページにブートストラップを使用しています。今私は特定の効果を達成したいと思います。私は、クラス名 "container-fluid"を持つdivとその下にテキストを持つh2タグを持っています。

<div class="container-fluid" style="background-color: #f8f8f8;text-align: center;height: 76px;"> 
    <br> 
    <h2 id="mesheading" style="color: #a76281; font-size: 14px; cursor: pointer; margin-top: -4px; font-family: 'brandon_grotesquebold'; text-transform: uppercase; letter-spacing: 2px;"> 
     Helping manufacturers save 20%-30% of the store cost &nbsp; 
     <span> 
      <button class="button_one" type="button" onclick="open_win_two()"> 
       LEARN MORE 
      </button> 
     </span> 
    </h2><br> 
</div> 

私の要件は、ブラウザウィンドウが折りたたまれてh2タグのフォントサイズが小さくなるということです。たとえば、10ピクセルになります。

とその実際のサイズにブラウザのウィンドウを拡大する上で、それは、元のフォントサイズに戻って移動するすなわち14px

私はjQueryの崩壊に関連するイベントについてのかなりの数の研究を行っています。しかしそれは私を助けませんでした。

これを達成するために手伝ってください。

ありがとうございます!!!

Answer 1

問題

画面サイズに応じて、要素のCSSを変更します。

ソリューション

あなたのh2または任意の要素のフォントサイズを変更するには、メディアクエリを使用することができます。

例

クエリで提供する2つの幅の間に何のための条件を設定するには、このメディアクエリを使用してください。 minとmaxwidthの幅を変更するだけで、これを再利用して複数のシナリオを作成することができます。

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) { 
     .container-fluid h2 { 
     font-size: 10px; 
} 
    } 

は、その後、メディアクエリーの外で、あなたのmedia queriesのいずれかの条件に該当しないもののデフォルトとしてこれを行うことができます。ここでは特定のデバイス

をターゲット

.container-fluid h2 { 
    font-size: 14px; 
} 

は、一般的なデバイスをターゲットに、より一般的に必要なメディアクエリの一部です。

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
/* Styles */ 
} 
/********** 
iPad 3 
**********/ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 
/* Desktops and laptops ----------- */ 
@media only screen and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

/* iPhone 5 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* iPhone 6 ----------- */ 
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* iPhone 6+ ----------- */ 
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* Samsung Galaxy S3 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* Samsung Galaxy S4 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

/* Samsung Galaxy S5 ----------- */ 
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

Answer 2

あなたは、このようなメディアクエリのデフォルトのブレークポイントを使用する必要があります。

CSS

/* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) { 
    .container-fluid h2 { 
     your font size 
     } 
    } 

/* Small Devices, Tablets */ 
    @media only screen and (min-width : 768px) { 
    .container-fluid h2 { 
     font-size: 10px; 
    } 
    } 

/* Medium Devices, Desktops */ 
    @media only screen and (min-width : 992px) { 
    .container-fluid h2 { 
     your font size 
    } 
    } 

/* Large Devices, Wide Screens */ 
    @media only screen and (min-width : 1200px) { 
    .container-fluid h2 { 
     your font size 
    } 
    }