如何在Underscores（wordpress）上製作響應排版？

試圖找出如何使用下劃線。之前，他們對於不同的屏幕排版響應的字體，我通常會寫不同的媒體查詢如下：如何在Underscores（wordpress）上製作響應排版？

@media screen and (min-width: 480px) { 
    html{ 
     font-size: 18px; 
    } 
    h1 { 
     font-size: 2rem; 
    } 
    h2 { 
     font-size: 1rem; 
    } 
     etc.. 
} 

    @media screen and (min-width: 700px) { 
     html{ 
      font-size: 14px; 
     } 
     h1 { 
      font-size: 0.5rem; 
     } 
     h2 { 
      font-size: 1.3rem; 
     } 
      etc.. 
    }

使用下劃線，我該如何更改父字體大小等等的子元素可以有一個rem大小？

我嘗試添加字體大小，因爲它似乎是父元素（？）

/*-------------------------------------------------------------- 
# Typography 
--------------------------------------------------------------*/ 
body, 
button, 
input, 
select, 
optgroup, 
textarea { 
    color: #404040; 
    font-family: Merriweather, sans-serif; 
    font-size:20px; 
    font-size: 1rem; 
    line-height: 1.5; 
    color:red; 


}

會是什麼這樣做的最好的方法？

來源

2017-10-08 Shaz

你幾乎明白了。如果使用rem是唯一的事情，你需要控制取決於視口被更改根元素的字體大小所有的字體讓說html：

html { 
    font-size: 12px; 
} 

p { 
    font-size: 1.1rem; 
} 

.footer { 
    font-size: .9rem; 
} 

@media (max-width: 767px) { 
    /* now the basis for all the font sizes set in 
    rems is 10px. For example, font-size for p is 10*1.1 = 11px. 
    Previously it was 1.1*12 = 13.2px. */ 
    html { 
     font-size: 10px; 
    } 
}

你也可以使用所謂的fluid typography，並結合其與以前的方法來得到響應（字體將擴大在不通過一定的限度後，僅在每個調整的嘗試，）：

html { 
    font-size: calc(14px + (26 - 14) * ((100vw - 300px)/(1600 - 300))); 
}

它縮放字體大小html在14px的 - 範圍取決於視26px大小爲300px - 1600像素。

PS。此外，這裏

font-size:20px; 
font-size: 1rem;

您首先設置20px，然後用1rem重寫它，所以它沒有任何效果。您可能想要刪除font-size: 1rem;。它會爲父元素（主體）設置字體大小等於20px，但它也會爲其中給定的其他元素（輸入，按鈕等）設置字體大小。涉及html元素的方法是常見的，它更加清晰。

來源

2017-10-08 07:37:35 curveball

我很困惑，因爲在wordpress的下劃線中，他們有一個註釋版式部分，它沒有定義html類 – Shaz

html不是一個類。它只是像許多其他人一樣的html元素。所有的CSS屬性都可以被覆蓋。你可以刪除，編輯或添加新的來獲得你想要的。所有的瀏覽器都有預定義的樣式，默認的字體大小是16px。如果你不改變它，那就是雷姆的基礎。 – curveball

如何在Underscores（wordpress）上製作響應排版？

回答

相關問題