Как я могу применить модули Rem для адаптивного дизайна на React?

Question

Я изменяю единицы rem для адаптивного дизайна (используйте rem для ширины и высоты блоков и меняйте html font-size, чтобы сделать их отзывчивыми) это хорошо работает в html и css.

Однако это вызывает проблему в React. Я использую медиа запрос и уменьшаю html font-size, чтобы изменить ширину и высоту.

На React, он работает только на font-size 62.5%. Я могу увеличить ширину и высоту, но не могу уменьшить их ниже 62,5% (10 пикселей).

App.css

* {
  padding:0
  margin:0px
}

html {
  font-size:6px
}

Other.css

.box1 {
   width:40rem
   height:10rem
 }