Недавно начал работать на ReactJS. Я стилизовал большую часть моего компонента с помощью скриншота inline styling - external sheet в MIDDLE
Теперь хочу работать над медиа-запросом для адаптивного веб-сайта. Тогда я понимаю, что @media не работает с inline? После googled, большинство уроков / руководств направляют меня к CSS стайлингу. Поэтому я начал пытаться использовать скриншот CSS на ПРАВОЙ
Из-за немного другого синтаксиса, у меня непонятное время, чтобы сделать это правильно. Пример:
Встроенный
backgroundColor: 'red',
marginRight: 20
CSS
background-color: red;
margin-right: 20;
Мои вопросы
- Если я продолжу свой стиль с помощью
inline styling-external sheet, есть ли какие-либо проблемы, которые я не предвидел? - Чтобы заняться
media query with my встроенным стилем`, на самом деле я могу сделать это следующим образом, как вы думаете?
Слушатель создан, чтобы получить screenWidth в приложении. js при любых изменениях screenWidth значение сохраняется в Redux. Затем текущий экран будет перерисован с помощью логики c, чтобы решить, какой тип компонента (мобильный / планшет / ноутбук) монтировать для пользователя.
Что также означает, что я должен создать 3 вида компонентов для всех экранов, чтобы быть отзывчивым.
if (screenWidth <= ScreenResolution.mobile) return "mobile";
else if ((screenWidth <= ScreenResolution.tablet) && (screenWidth > ScreenResolution.mobile)) return "tablet";
else if (screenWidth >= ScreenResolution.tablet)return "desktop";