如何更改斷點處的字體大小引導程序3

我有一個頁面標題<h1> MY JOB </h1>，字體大小爲70px。當頁面到達一個小斷點（手機）時，我想自動將標題的大小更改爲字號36px。如何更改斷點處的字體大小引導程序3

我該如何做到這一點？

這是我迄今所做的：

.title-extra-large-5 { 
 
    font-size: 70px !important; 
 
    line-height: 80px; 
 
} 
 
@media (max-width: 767px){ 
 
    .xs-title-extra-large-4{ 
 
    font-size: 36px !important; 
 
    line-height: 42px !important; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-7 col-md-8 col-sm-12 col-xs-12"> 
 
      <h2 class="title-extra-large-5 md-title-extra-large-3 xs-title-extra-large-4">MY JOB.</h2> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-03-14 Jefferson X Masonic

在你的問題中，你提到你的標題是h1，但在你的例子中，你使用h2。

除此之外，你走在正確的軌道上。你只需要改變的東西夫婦：

h2 { 
 
    font-size: 70px !important; 
 
    line-height: 80px !important; 
 
} 
 
@media (max-width: 767px){ 
 
    h2{ 
 
    font-size: 36px !important; 
 
    line-height: 42px !important; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-7 col-md-8"> 
 
      <h2>MY JOB.</h2> 
 
     </div> 
 
    </div> 
 
</div>

你並不需要參考col-sm-12和col-xs-12自舉將使他們成爲默認。你不需要額外的類title-extra-large-5 md-title-extra-large-3 xs-title-extra-large-4你可以參考h2或h1。

來源

2017-03-14 00:25:31 alljamin

嗨我確實bcoz h2用於多個標題，您的方法完美工作這是我需要的，謝謝 –

@JeffersonXMasonic如果我的答案解決了您的問題，請接受它。以下是有關如何接受StackOverflow上的答案的指南：https：//meta.stackexchange.com/a/5235/319051 – alljamin

我被某些屏幕尺寸的假設，你想改變它，對嗎？

根據W3SCHOOLS.COM
可以使用@media屬性在一定的情況下，以顯示一組特定的樣式。

body{ 
    background-color: blue; /*For screens with more than 480px screen width.*/ 
} 
p{ 
    font-size:72px; 
} 
@media screen and (max-width: 480px) { /*Same but for less*/ 
    body { 
     background-color: lightgreen; 
    } 
    p{ 
     font-size:36px; 
    } 
}

這相較於你的代碼，我會說你已經得到它大多是正確的，但在被leniant！重要。這可能與其他樣式相沖突，所以只能在使用時使用而不是希望它改變，否則樣式將不會被應用。

編輯：看來你有兩個類完全相同的事情，但由於！重要而相互衝突。我會說只保留其中一個班級，並用@media更改樣式，以保證它能正常工作，並且不會與其他樣式發生衝突。

來源

2017-03-14 00:14:12

如何更改斷點處的字體大小引導程序3

回答

相關問題