Как создать гибкий макет в современном HTML - PullRequest
Новая
       35

Как создать гибкий макет в современном HTML

0 голосов
/ 20 октября 2018

Я совершенно новичок (или слишком стар для) современного HTML, и мне пришлось разработать простой пользовательский интерфейс.Мне нужно поддерживать 2 типа экрана:

enter image description here

Как видно выше, мой пользовательский интерфейс должен состоять из меню и контента (дляНапример, текст с изображением в стороне или выше).Если отображаться на мобильном телефоне в простых словах, он должен быть «повернут» на 90 градусов против часовой стрелки.

В мои времена макеты делались с помощью <table><tr><td>.. или <frameset>.. -подобных вещей.Но одна схема - <td>item1</td><td>item2</td>, а другая - <tr>item1</tr><tr>item2</tr>.В статическом текстовом файле .htm я могу написать только один вариант.Известный мне способ - интенсивно использовать javascript и генерировать документ с помощью document.write(), но мне не очень нравится эта идея, я считаю, что должно существовать что-то более простое.

Какой самый простой вариант сделать этов HTML вручную, без использования тяжелых и сложных для изучения структур?

1 Ответ

0 голосов
/ 26 октября 2018

Базовая структура с flexbox может быть

(без каких-либо стилей и размеров) 

figure {
  margin: 0;
}

.list-unstyled {
  list-style: none;
  padding: 0;
  margin: 0;
}

.d-flex {
  display: flex;
}

@media screen and (max-width: 767.99px) {
  .sm-fd-column {
    flex-direction: column;
  }
}

@media screen and (min-width: 768px) {
  .lg-fd-column {
    flex-direction: column;
  }
  /* ... */
  .lg-order-2 {
    order: 2;
  }
  /* ... */
}
<div class="d-flex lg-fd-column">
  <div>
    <ul class="list-unstyled d-flex sm-fd-column">
      <li><input type="checkbox"></li>
      <li><input type="checkbox"></li>
      <li><input type="checkbox"></li>
      <li><input type="checkbox"></li>
      <li><input type="checkbox"></li>
    </ul>
  </div>
  <div class="d-flex sm-fd-column">
    <figure class="lg-order-2"><img src="http://via.placeholder.com/200x150" alt=""></figure>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus saepe nobis impedit excepturi, perspiciatis! Eaque in quam corporis, modi, eos assumenda error totam autem cumque dolores magni deleniti! Doloribus, unde.
    </p>
  </div>
</div>

Предусмотрено два разных размера: маленький (см) и большой (lg).

Больше информации о flexbox: https://css -tricks.com / сниппеты / CSS / а-руководство к Flexbox /

...