引導程序崩潰問題及其對DOM的影響

Question

我在我的網頁中使用引導程序。現在我想達到一個特定的效果。我有一個類名爲「容器流體」的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標籤的字體尺寸將變得更小。例如它將變成​​10px。

並擴大其實際大小的瀏覽器窗口，將回至原來的字體大小即14px的

我已經做了關於jQuery的崩潰相關的事件相當多的研究。但它沒有幫助我。

所以請幫我實現這一點。

在此先感謝！

Answer 1

問題

更改上取決於屏幕尺寸元素的CSS。

解決方案

您可以使用媒體查詢更改h2或任何元素的字體大小。

例子

使用該媒體查詢設置條件在查詢中提供了兩種寬度之間的任何東西。您只需通過更改寬度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 
    } 
    }