Блог

Главная - Вопросы по программированию - Как мне сделать так, чтобы мои компоненты React реагировали на медиазапросы css?

Как мне сделать так, чтобы мои компоненты React реагировали на медиазапросы css?

#css #reactjs #media-queries

#css #reactjs #медиа-запросы

Вопрос:

У меня есть этот сайт, который я в настоящее время пытаюсь преобразовать в react с помощью медиазапроса css для телефонов и планшетов.

Проблема, с которой я только что столкнулся, заключается в том, что css для the media query не читается или просто не работает в React.

Есть какое-либо решение для этого? Спасибо

Комментарии:

1. Вы могли бы заглянуть в такие фреймворки, как aphrodite . Они поддерживают медиа-запросы и условные стили.

2. Можете ли вы отследить фрагмент кода в качестве примера того, как вы пытаетесь достичь этого?

3. @FabianSchultz Я, вероятно, буду использовать это, поскольку в нем также есть поддержка шрифтов

4. @EdmarMiyake в принципе media queries , у меня уже есть, но React не читает его, если я прав. Итак, в основном я нахожу решение о том, как использовать те media queries , которые у меня есть.

Ответ №1:

Медиазапросы не имеют ничего общего с React, если вы не используете встроенный CSS, потому что в конце react выводит HTML, и медиазапросы работают идеально.

Я построил весь интерфейс в react и сделал его чисто отзывчивым. Также я использовал только 1% css как встроенный и использую две платформы 1. Semantic-ui 2. Flexbox Grid

наряду с приведенными ниже медиазапросами (записывается меньше переменных).

 @highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
              ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
              ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
              ~"only screen and (min-device-pixel-ratio: 1.5)";
@mobile:      ~"only screen and (max-width: 529px)";
@tablet:      ~"only screen and (min-width: 530px) and (max-width: 949px)";
@desktop:     ~"only screen and (min-width: 950px) and (max-width: 1128px)";
@desktop-xl:  ~"only screen and (min-width: 1129px)";
@desktop-above: ~"only screen and (min-width: 950px)";
@tablet-above: ~"only screen and (min-width: 530px)";
@mobile-above: ~"only screen and (min-width: 320px)";

Комментарии:

1. о, действительно? Я и не подозревал об этом. Огромное спасибо! Мой друг жестко запрограммировал некоторые стили css, поэтому я не знал, что это основная проблема. Еще раз спасибо.

2. 1. не используйте встроенный css, примените класс или стиль к компоненту и используйте обычный css / less и требуйте его в файле компонента или непосредственно на вашей странице.

3. Я действительно использую классы или идентификаторы, просто мой друг сделал эти страницы, и я просто конвертировал в jsx, а потом обнаружил проблему. Но спасибо за разъяснение, это действительно помогло облегчить ситуацию.

Метки: ,