Блог

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

Как сделать определенные стили css адаптивными не ко всему телу

#html #css #responsive-design #styles #plotly-dash

#HTML #css #адаптивный дизайн #стили #plotly-dash

Вопрос:

У меня есть некоторые элементы графического интерфейса в моем приложении dash, которые нужно уточнить, я использую daq LED display элемент в dash , и я использую css стили ниже. Я хочу сделать эти элементы адаптивными, потому что, когда мой босс открывает приложение на своем рабочем столе, элементы отключены. Как я могу сделать css адаптивным для моего экрана и экрана большего размера. Я использую настольное приложение, а он также использует рабочий стол, но немного больше.

 .leed-left {
    position: absolute;
    top: 18%;
    left: 2%;
    z-index: 1
}

.leed-top {
    position: absolute;
    top: 3%;
    left: 38%;
    z-index: 1
}

.leed-right {
    position: absolute;
    top: 18%;
    right: 26%;
    z-index: 1
}

.leed-down {
    position: absolute;
    top: 38%;
    left: 38%;
    z-index: 1
}

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

1. можете ли вы указать, что вы действительно хотите в этом вопросе. Я не могу определить, что делает Лидс

2. это стиль css, который помещает элемент в определенную позицию в моем приложении, но позиция меняется при просмотре на большом экране

3. попробуйте использовать top: 0; left: 0; , затем используйте поле в виде %

4. вверху: 0; слева: 0; где?

5. это пример. .leed-left { position: absolute; top: 0; left: 0; margin-left: 2%; margin-right: 28%; z-index: 1 } . Я имею в виду, что таким образом вы должны сделать top, left, right, bottom to 0 и попробовать использовать поля

Ответ №1:

ваш код реагирует, если на экране есть только это, поэтому мне интересно, нет ли у вас другого элемента… class = «ledd-xxx» они находятся в div? Должны ли они быть адаптивными по отношению к этому контейнеру или по отношению ко всему вашему телу?

если это относится только к контейнеру (родительскому), вот код, в противном случае укажите немного больше (пожалуйста):

 <div class="container">
  <div class="leed-top"> </div>
  <div class="leed-left"> </div>
  <div class="leed-right"> </div>
  <div class="leed-bottom"> </div>
</div>

и CSS

 .container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.leed-top { grid-area: 1 / 2 / 2 / 3; }
.leed-left { grid-area: 2 / 1 / 3 / 2; }
.leed-right { grid-area: 2 / 3 / 3 / 4; }
.leed-bottom { grid-area: 3 / 2 / 4 / 3; }