0

Есть изначально полноэкранное адаптивное 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>

1
  • Есть идея, что можно решить проблему с помощью iframe. Но в таком случае, как я понимаю, содержимое iframe перестанет индексироваться поисковыми системами и, если внешний сайт так же использует React, либо таких встраиваемых компонентов много, библиотека будет загружаться многократно, что значительно скажется как на скорости загрузки страницы, так и на скорости работы...
    – witaway
    10 мая 2020 в 16:28

1 ответ 1

0

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.