Медиа-запросы CSS3 - два макета

Question

Медиа-запросы CSS3 - два макета

0

Я экспериментирую с медиа-запросами css3, и я пытаюсь создать два разных макета для небольших экранов (телефоны, планшеты) и один для больших экранов. Макет должен включать три основных div (a, b, c).

  <div class="wrapper">
      <div id="a"></div> 
      <div id="b"></div>
      <div id="c"></div>
  </div>

На маленьких экранах есть div#a сверху, а два других divs div#b, div#c будут размещены на 50% -50% ниже первого div, см. Изображение:

Экран большего размера должен иметь все div в строке, см. Изображение:

Это то, что мне удалось сделать до сих пор, но не работает должным образом.

http://jsfiddle.net/dT9HY/

cch 22 март 2014, в 14:21

Источник

0

Для мобильных телефонов (320 на 480 пикселей) я бы поставил стек всех контейнеров: ABC
JohanVdR 22 март 2014, в 14:04

Теги:

html

css

media-queries

1 ответ

Ещё вопросы

Для мобильных телефонов (320 на 480 пикселей) я бы поставил стек всех контейнеров: ABC

JohanVdR · Accepted Answer · 2014-03-22T10-43-00.000Z

Это была бы основная идея. Включено стилизация для облегчения заполнения на коробках.

http://fiddle.jshell.net/E4jjt/14/
http://fiddle.jshell.net/E4jjt/14/show/

* {
  /* http:/paulirish.com/2012/box-sizing-border-box-ftw/ */
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}
.wrapper:before, .wrapper:after {
    content: " ";
    display: table;
}
.wrapper:after  {
    clear: both;
}

.wrapper > div {
    min-height:200px;
    width:33.333333%;
    float: left;
    padding: 15px;
    position: relative;
    /* extra cosmetics */
    color: #fff;
    text-align: center;
    font: 1.5em Georgia;
}
#a {
    background-color: #252525;
}
#b {
    background-color:#ACACAC;
}
#c {
    background-color:#F4CF40;
}

@media all and (max-width: 800px) {
    #a {
        width: 100%;
    }
    #b, #c {width: 50%;}
    #b {
        clear: left;
    }
}

Добавлю также версию с отступами для ящиков ...
Обновлен ответ, который добавляет отступы для ящиков.