Угловой материал Изменение размера текста текста

Question

Я использую https://material.angularjs.org/latest/, чтобы сделать мой сайт отзывчивым. Для разных размеров экрана я хочу, чтобы мой размер шрифта изменился, например,

для небольшого экрана, я хочу, чтобы размер шрифта был 5 пикселей и для большего, чем средний, 14 пикселей.

Я делал это до сих пор, но размер шрифта не меняется:

<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, мы используем #.

1 - Вы используете переменные в CSS. CSS не поддерживает переменные. Меньше/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 в качестве базы. И использовать их для расширения на основе классовой.