Ответ 1
Все сводится к CSS. Независимо от того, используете ли вы ванильный CSS, SCSS, LESS или CSS-in-JS, вы хотите нацеливать свои компоненты с помощью селекторов CSS, которые позволяют вам адаптироваться к изменениям разрешения.
Вот основной пример:
// ./foo.js
import React from "react";
import "./styles.css";
// Either as a Class
export default class FooClass extends React.component {
render() {
return <div className="foo">Foo</div>;
}
}
// Or as a function
export default FooFunction = (props) => <div className="foo">Foo</div>;
И в твоих styles.css:
.foo {
background-color: red;
width: 100%;
margin: 0 auto;
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
width: 75%;
background-color: green;
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
width: 50%;
background-color: pink;
}
}
Приведенные выше стили применяются в подходе, ориентированном на мобильные устройства. Это означает, что в объявлении класса по умолчанию указывается, как будет выглядеть элемент на самом маленьком целевом экране. Эти мобильные стили будут переопределены последующими медиа-запросами. За эти годы эти "встроенные" медиа-запросы непосредственно в классе CSS стали моим любимым способом организации моих адаптивных стилей.
Вот некоторые адаптивные ресурсы дизайна:
https://css-tricks.com/nine-basic-principles-responsive-web-design/