Каков наилучший способ перемещения элемента, который находится сверху вниз в адаптивном дизайне

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

<html>
<head>
..
</head>
<body>
..
<p>I am on the top of desktop page, and bottom of mobile page</p>
...
</body>
</html>
11
css css3 html responsive-design

4 ответов

переупорядочивание элементов неизвестных высот в отзывчивой манере лучше всего делать с помощью Flexbox. Хотя поддержка не подходит для настольных браузеров (т. е. является основным ограничивающим фактором здесь, поддержка начинается с v10), большинство мобильных браузеров do поддержать его.

http://cssdeck.com/labs/81csjw7x

@media (max-width: 30em) {
  .container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  .container .first {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
}

http://caniuse.com/#feat=flexbox

имейте в виду, что Flexbox может конфликтовать с другими методами компоновки, такими как типичные методы сетки. Элементы Flex, настроенные на float, могут привести к неожиданным результатам в браузерах Webkit, использующих спецификацию 2009 (display: -webkit-box).

20

Лучшая совместимость чем flexbox можно достигнуть с display: table-footer-group (IE8+)
Обратное действие: переместить элемент выше, чем в HTML-коде, вы можете попробовать table-caption и table-header-group.

не работает самостоятельно заменить такие элементы, как img или input, по крайней мере, на Chrome (и это вполне нормально), но хорошо с div например.

EDIT: это 2016 так Flexbox (и Autoprefixer) все вещи \o/

5

Я не знаю, лучший ли это подход, но вы можете воспроизвести тот же элемент, где хотите, и играть с display: none/

1

Я предполагаю, что когда вы говорите "положение", вы имеете в виду, что он не перемещается при прокрутке. В этом случае вы можете использовать:

p.className {
  position: fixed;
  bottom: 0; // for mobile devices
  top: 0; // for desktops
}

где P элемент получает атрибут класса, как это:

<p class="className">I am on the...</p>

bottom & top не будет существовать в то же время вам нужно будет загрузить соответствующий на основе устройства. Для рабочего стола Вам также нужно будет смещать содержимое с высотой div, чтобы оно не было скрыто под фиксированным div

0