Как сделать div и его внутреннее содержимое отзывчивым

Я работаю над проектом, в котором у меня есть div, в котором у меня есть 4 div. внутренний DIV исправили положение я хочу сделать DIV отзывчивым и вместе с тем я хочу все 4 DIV, чтобы сохранить свою первоначальную позицию вот мой код jsfiddle Как сделать div и его внутреннее содержимое отзывчивым

я есть установи внутреннее положение Div, используя в недостаточной мере сверху, запас левого

.one{ 
    margin-top: 16em; 
    margin-left: 2em; 
    position: absolute; 
} 
.spinner.two { 
    margin-top: 20em; 
    margin-left: 1em; 
    position: absolute; 
} 
.spinner.three { 
    margin-left: 4em; 
    margin-top: 23em; 
    position: absolute; 
} 
.spinner.four { 
    margin-left: 14em; 
    margin-top: 19em; 
    position: absolute; 
}

, но я не делает отзывчивым .... пожалуйста, помогите

источник

2015-09-05 Rocking Birds

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

. По моему опыту, вы должны разрешить как можно большему количеству divs потоковым потоком. Высота естественно увеличивается с более узкой шириной. Абсолютное позиционирование не поддается этому. Я думаю, что хороший отзывчивый дизайн не обязательно требует большого количества медиа-запросов. – ne1410s

Я создал jsfiddle, которое более отзывчивый по ширине устройства. https://jsfiddle.net/0kahjww6/1/

.one { margin-left: 7%; } 
.two { margin-left: 4%; } 
.three { margin-left: 17%; } 
.four { margin-left: 40%; }

Основных вещи, которые я изменил были:

Удалены абсолютные позиционирование, где не было необходимостью
ширина Набора активной области до 100% от его емкости - максимальная ширина доступна , который реагирует на изменения в ширине браузера
Позиционированные вещи относительно внутри этого в соответствии с шириной%, а не абсолютными пикселями или ems

Возможно, он не идеален для вас, но он, безусловно, более отзывчив.

источник

2015-09-05 06:41:41 ne1410s

Как сделать div и его внутреннее содержимое отзывчивым

ответ

Смежные вопросы