Медиа запросы относительно размера родительского элемента

Question

Есть изначально полноэкранное адаптивное React-приложение. Потом его, оказалось, надо встроить в сайт. Скорее всего, даже не написанный на React. Для адаптивности React-приложения я использовал медиазапросы. Когда приложение было полноэкранным, проблем не возникало, на всех дисплеях было красиво.

Но когда я его встроил и установил ему размер через свойства width и height оказалось, что медиазапросы всё равно работают относительно viewport. В результате небольшой относительно странички компонент имеет стили, адаптированные под большой монитор. Выглядит ужасно.

Как это можно разрешить? Я думал, можно как-то установить медиазапросы относительно размеров родительского элемента, но ничего на эту тему не нашёл.

Простым решением была бы установка стилей вручную через javascript. Но пример, приведённый ниже, очень сильно упрощён. На деле компонент может иметь очень много динамических стилей и не обязательно известно заранее, что его потом надо будет встроить.

function App() {
  return (
    <div class={"component"}>
      <h1>The awesome block of text:</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos eum iure perspiciatis porro quae?</p>
    </div>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

.component {
  font-family: sans-serif;
  border: 1px solid #1f1f1f;
  padding: 5px 0 0 5px;
}

@media (min-width: 100px) {
  .component {
    font-size: 10px;
  }
}

@media (min-width: 500px) {
  .component {
    font-size: 20px;
  }
}

@media (min-width: 1000px) {
  .component {
    font-size: 30px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
  <style>
    #root {
      width: 400px;
    }
  </style>
</head>
<body>
  <p>There's a cool React-component below:</p>
  <div id="root"></div>
</body>
</html>

Answer 1

Предлагаю решить проблему с помощью небольшой коррекции css;
1. для каждого используемого медиа-запроса определить ширину/высоту родительского элемента
2. ввести соответствующий коэффициент в css

БЛОГ НА HUSL

Медиа запросы относительно размера родительского элемента

Ответы (1 шт):