Есть изначально полноэкранное адаптивное 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>
iframe
. Но в таком случае, как я понимаю, содержимоеiframe
перестанет индексироваться поисковыми системами и, если внешний сайт так же использует React, либо таких встраиваемых компонентов много, библиотека будет загружаться многократно, что значительно скажется как на скорости загрузки страницы, так и на скорости работы...