Изменение размера div с помощью CSS для мобильных устройств

Question

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

Спасибо

Answer 1

Вы можете использовать медиа-запрос, как показано ниже для конкретного устройства, т.е. телефон, закладка и т.д. Приведем лишь пример

CSS

.cont {float:left;width :400px;background-color:#000;} 
.cont .left {float:left;width :200px;} 
.cont .right {float:left;width :200px;} 

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 

.cont {width :200px; background-color:#666666 !important;} 
.cont .left {width :100px !important;} 
.cont .right {width :100px !important;} 

} 

HTML

<div class="cont"> 
    <div class="left"> 
     left content 
    </div> 
    <div class="right"> 
     right content 
    </div> 
</div> 

В противном случае вы можете установить ширину DIV в процентах вместо пикселя т.е.

.cont {float:left;width :100%;background-color:#000;} 
.cont .left {float:left;width :50%;} 
.cont .right {float:left;width :50%;}