Я знаю, как сделать это с помощью JavaScript, мне просто интересно, есть ли какой-нибудь модный CSS, который может сделать это. Я хочу, чтобы, когда я стал мобильным, каждый div занимал весь экран. Вот как это выглядит сейчас.

My Current look

Вот некоторые CSS для каждого div.

.center{


background-color:#ffffff;
  width:33.33%;
  height: 100%;
  display: inline-block;

}

.left{
  background-color:#ffffff;
  width:33.33%;
  height: 100%;
  float:left;
    overflow: hidden;

}

.right{
  background-color:#ffffff;
  width:33.33%;
  height: 100%;
  float:right;
   overflow: hidden; 
}
0
TheMangaStand 28 Авг 2017 в 19:31

4 ответа

Лучший ответ

Решите, в каком разрешении вы хотите, чтобы div занимал всю ширину, и примените различные стили, основанные на медиа-запросы. Вот как это делает загрузчик.

Базовый пример с точкой останова шириной 600 пикселей.

@media (max-width: 600px) {
  .mybox {
    width:100%;
  }
}
4
luxdvie 28 Авг 2017 в 16:35

Для условного форматирования с помощью css вы можете использовать медиазапросы. К сожалению, для мобильных устройств нет медиазапроса. Однако вы можете установить макс. ширина . Например:

@media only screen and (max-device-width: 600px){ 
    ... 
}

Таким образом, любое устройство с шириной экрана меньше 600 пикселей получит CSS, который находится на ....

0
Pim 28 Авг 2017 в 16:38
@media screen and (max-width: 600px) {
    .center,
    .left,
    .right {
        width: 100%;
    }
}

Если ширина экрана меньше чем 600px, тогда divs становится 100% шириной.

Вы можете изменить значение максимальной ширины, приспосабливаясь к вашим потребностям.

1
Paweł Gawlas 28 Авг 2017 в 16:37

Определенно, в CSS также есть «причудливые» способы, которые вы можете использовать для того же. Во-первых, вы можете использовать библиотеку начальной загрузки, чтобы сделать ваш HTML отзывчивым. Вы можете обратиться по следующей ссылке: http://getbootstrap.com/

Кроме того, вы можете использовать медиа-запросы CSS, которые могут выполнить ту же задачу. вот ссылка для того же: https://www.w3.org/TR/css3 -mediaqueries /

Выберите разрешение, которое вы хотите, и примените свой CSS.

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
1
sumit chauhan 28 Авг 2017 в 16:35