Могу ли я уменьшить размер шрифта html во время реагирования?

Question

Я сделал весь сайт с rem units как я использовал bootstrap 4 aplha version и теперь собираюсь начать делать отзывчивый сайт.

У меня есть html {font-size: 16px} так что мне нужно знать, что я могу уменьшить размер html в медиазапросы? Что-то вроде:

/****responsive css***/ 
@media only screen and (max-width: 1280px) { 
    html{ 
     font-size: 15px; 
    } 
} 

@media only screen and (max-width: 1199px) { 
    html{ 
     font-size: 14px; 
    } 
} 

Мне нужно знать, есть ли какие-либо проблемы с этим или я могу использовать это?

Answer 1

Таким образом, вы может перезаписать правило в Ширина устройства ниже 1280px, потому что последнее правило переопределит его.

Вы бы лучше сделать это следующим образом:

@media only screen and (min-width: 1000px) and (max-width: 1199px) { 
    html{ 
     font-size: 14px; 
    } 
} 

@media only screen and (min-width: 1200px) and (max-width: 1280px) { 
    html{ 
     font-size: 15px; 
    } 
} 

также, что было бы лучше использовать % (в процентах единиц) в сочетании с em единицы, которые relative CSS units по размеру, в адаптивном дизайне, так как он не больше зависит от пикселя устройства.

body{ 
    font-size: 62.5%; 
} 

#element{ 
    font-size: 1em; 
} 

Вы можете прочитать больше о Лучших практик о CSS единицахhere

Answer 2

При условии, что он не перезаписан, например. на body, он должен работать

Кроме того, остальная часть вашего размера шрифта должны быть в rem, em или %

Все, что в px будет оставаться таким образом