简单的方法来实现响应字体大小

是否有一种方法可以设置所有字体大小以缩小媒体查询中的x值，而不是为每个元素（h1，h2，h3）设置字体大小。目前，我有一个媒体查询，看起来像这样：简单的方法来实现响应字体大小

@media only screen and (min-width : 1200px) { 
    body { 
    font-size: 20px; 
    } 
}

然而，这并没有为标题的大小。有没有办法在网站上包含所有文字？谢谢

来源

2017-10-07 RT5754

使用root EM'rem'您的标题。检查[本文]（https://www.sitepoint.com/understanding-and-using-rem-units-in-css/）。 – skobaljic

是的，基本上你可以为像html这样的根元素设置像素的字体大小，然后你可以使用rem单位为其他元素设置字体大小。在您的@media规则中，您必须更改html元素的font-size属性，并且由于您使用的是rem s，因此它们将同样影响其他元素，因为它们取决于根的字体大小。

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; 
    } 
}

来源

2017-10-07 19:23:45 curveball

伟大的这是我需要感谢 – RT5754

div{font-size:15px;} 
 
@media screen and (max-width:1200px) { 
 
    div{font-size:20px;} 
 
} 
 
@media screen and (max-width:600px) { 
 
    div{font-size:25px;} 
 
} 
 
@media screen and (max-width:320px) { 
 
    div{font-size:50px;} 
 
}

<div>test font size</div>

来源

2017-10-07 19:37:51

简单的方法来实现响应字体大小

回答

相关问题