Блог

Главная - Вопросы по программированию - CSS: Возможно ли сделать так, чтобы div становился шире по мере уменьшения ширины экрана?

CSS: Возможно ли сделать так, чтобы div становился шире по мере уменьшения ширины экрана?

#css

#css

Вопрос:

Я хочу попробовать изменять ширину div как обратную размеру экрана, пока она не достигнет максимума в 100%, используя только CSS (пожалуйста, без JS).

Чтобы было понятно, вот пример:

  • если размер экрана составляет 500 пикселей в ширину, ширина div будет равна 100%
  • если размер экрана равен 1000 пикселей в ширину, div будет равен 50%
  • и так далее

Я не хочу использовать медиа-запросы, потому что в них слишком много микроуправления, я надеюсь на какой-то пропорциональный calc () способ сделать это

До сих пор я пропорционально определял ширину div, используя размеры ‘vw’, которые работают просто отлично, но в этом случае я хочу попробовать сделать обратное.

Я надеюсь, что кто-то придумал волшебную методологию для этого?

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

1. не означает ли это, что div будет иметь фиксированный размер? потому что, если у вас div фиксированного размера и экран становится меньше, div будет выглядеть больше

Ответ №1:

Вы можете использовать calc(Xpx - Yvw) . Yvw Будет увеличиваться, когда экран будет большим, делая div меньше и наоборот.

Вот базовый пример:

 .box {
  width:calc(750px - 50vw);
  min-width:50px; /* let's have a minimum boundary */
  max-width:100%; /* and a maximum boundary */
  margin:auto;
  height:50px;
  background:red;
}  
 <div class="box"></div>

Но, как я уже прокомментировал, наличие div с фиксированным размером также будет выполнять эту работу визуально

 .box {
  width:500px;
  max-width:100%;
  margin:auto;
  height:50px;
  background:red;
}  
 <div class="box"></div>