отзывчивые плавающие divs

У меня есть два divs floated left each with width: 50%; и min-width: 300px; Если размер контейнера div или размер экрана в случае отсутствия контейнера имеет ширину ниже 600 пикселей, естественно, div 2 идет под div 1.отзывчивые плавающие divs

Когда div two идет под div 1, у них все еще будет 50 % ширина .... можно сделать как divs шириной до 100%?

Пример: Foundation

В этом примере есть 3 дивы, которые идут друг под другом, и изменение размера до 100% при попадании их мин ширина контрольных точек.

Это именно то, что я хочу достичь, однако я не могу понять это из примера Фонда, который я вам дал.

источник

2013-04-13 Gheorgheoiu Nicolae

Используйте mediaqueries, чтобы установить ширину до 100% ниже точки останова. (100% сложенные divs обычно используются для таких устройств, как мобильные телефоны и маленькие планшеты, поэтому я думаю, что ниже 767px будет в порядке.) – Simon

@Simon Обычно лучше работать на мобильных устройствах (т. Е. Скрыть стили, которые применяются только к более широким устройствам медиа-запросы). Это почти всегда работает, чтобы немного меньше кода, а старые мобильные устройства не понимают медиа-запросы. – cimmanon

@Cimmanon Спасибо, что указали это! Я также большой поклонник мобильного дизайна, но в этом вопросе я не думаю, что стоит упомянуть в этом конкретном вопросе. – Simon

Выработать больше на решение дается @Simon,

div.one{ 
    width:50%; 
    min-width:100px; 
    float:left; 
} 
@media screen and (max-width: 767px){ 
    div.one{ width:100%} 
}

Смотрите эту скрипку: http://jsfiddle.net/GraH9/

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

http://www.hongkiat.com/blog/responsive-web-tutorials/

источник

2013-04-14 14:32:06 banjoSas

отзывчивые плавающие divs

ответ

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