Angular Material Design文本大小更改
Angular Material Design文本大小更改
提问于 2016-06-05 23:52:50
我正在使用https://material.angularjs.org/latest/来使我的站点响应。对于不同的屏幕大小，我希望我的字体大小改变，例如，
对于小屏幕，我希望字体大小为5px，如果大于中屏幕，我希望字体大小为14px。
到目前为止，我已经做到了这一点，但字体大小没有改变：
<h3 class=".md-display-1">John</h3>它的css：
@media (max-width: @flex-sm) {
body{font-size: 2px;}
}
@media (max-width: @flex-gt-md) {
body{font-size: 30px;}
}回答 1
Stack Overflow用户
发布于 2016-06-06 00:37:58
您的代码有一些问题。
0-你没有使用这个类：
<h3 class=".md-display-1">John</h3>您必须将其更改为：
<h3 class="md-display-1">John</h3>没有圆点。点只是用来表示它是一个类。当id是我们使用#的时候。
1-在CSS中使用变量。CSS不支持变量。Less/Sass支持变量。但是如果你使用的是css。你必须写上尺码。Bootstrap中的标准大小为：
/* Extra small devices (phones, less than 768px) */
@media (max-width:767px) {
body {font-size: 2px;}
}
/* Small devices (tablets, 768px and up) */
@media (min-width:768px) {
body {font-size: 10px;}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width:992px) {
body {font-size: 20px;}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width:1200px) {
body {font-size: 30px;}
}2-记住使用AngularMaterial CSS。它们在其页面上包含了Tipography文档：https://material.angularjs.org/latest/CSS/typography。检查一下那里。他们使用10px作为基础。并使用em基于clasess进行扩展。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37643838
复制相关文章
相似问题
腾讯云开发者
