Question

我正在使用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;}
}

Answer 1

您的代码存在问题。

0 - 您没有使用该课程：

 <h3 class=".md-display-1">John</h3>

您必须将其更改为：

 <h3 class="md-display-1">John</h3>

没有圆点。点只是表示它是一个类。当id为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。

角度材料设计文本大小更改

1 个答案: