Блог

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

Как создать один css для каждого размера экрана, даже если я не могу изменить имя класса в библиотеке

#javascript #html #css #reactjs

#javascript #HTML #css #reactjs

Вопрос:

Я изучаю ReactJS и JavaScript и должен спросить, как лучше настроить этот css.

Я использую react-responsive для определения размера экрана и настройки наилучшего макета.

Моя дилемма, с которой я сталкиваюсь, — это css:

 .navbar-dark .navbar-toggler-icon {
  height: 40px;
  width: 40px;
}

.navbar {
  transition: top 0.6s;
  opacity: 0.95;
  filter: alpha(opacity=30); /* For IE8 and earlier */
}

.navbar--hidden {
  top: -150px;
}

Это react-bootstrap NavBar , и мне нужно создать 3 разные версии css, подобные этой:

 .navbar-desktop {...   
.navbar-mobile {...  
.navbar-tablet {...

Но когда я это делаю, панель навигации не использует css, поскольку className они не соответствуют css, верно??

Какие альтернативы у меня здесь есть?
Надеюсь, вы понимаете, что я имею в виду!

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

1. Вы имеете в виду медиа-запросы? developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries /…

2.@Ozone Я должен прочитать об этом, как это работает, спасибо. У меня есть эта песочница, в основном она работает нормально, как вы видите, но если я вставлю панель навигации, я могу стилизовать ее только один раз, например, установив размер кнопки переключения панели навигации. При изменении экрана кнопка должна быть меньше, но css исправлен, как в css .navbar-toggler-icon , мне нужен способ установить размер кнопки переключения при изменении экрана, но кнопка NavBar имеет только это className .navbar-toggler-icon

3. Я предлагаю вам также ознакомиться с некоторыми библиотеками стилей, такими как styled-components , Чтобы легче определять ваши стили с помощью компонентов и обрабатывать вложенные медиа-запросы и т. Д.

4. На панели навигации есть кнопка переключения (гамбургер) с именем класса .navbar-toggler-icon , которое я могу изменить height: 40px в css. Когда экран становится меньше, я хочу установить в css height: 30px . Как мне это сделать? Я использую react-responsive , чтобы определить, что экран меньше, но тогда как установить высоту? Высота уже установлена в css на height: 40px

5. Спасибо @Ozone media queries было решением. Ответьте, и я принимаю ваш ответ!

Ответ №1:

Похоже, css media queries — это ответ на ваш вопрос.

Подробнее о медиа-запросах в MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries