Как расположить персонажа по центру, чтобы вокруг него всегда были отступы, независимо от размера экрана - PullRequest
Новая
       17

Как расположить персонажа по центру, чтобы вокруг него всегда были отступы, независимо от размера экрана

1 голос
/ 07 мая 2019

У меня есть эти экраны:

Полный экран рабочего стола.

enter image description here

Маленький экран рабочего стола.

enter image description here

Экран мобильного телефона.

enter image description here

HTML-кодэто: 

html, body {
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

body > section, body > header {
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

header {
  display: flex;
  flex-direction: column;
}

header > section {
  display: flex;
  flex-direction: row;
  flex: 1;
}

header > section > figure {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 300px;
}

header > h1 {
  padding: 10px 20px;
  font-size: 20px;
  background: black;
  color: white;
}

header > section > aside {
  width: 300px;
  display: flex;
  background: red;
}

@media (orientation: portrait) {
  header > h1 {
    order: 1;
  }

  header > section {
    order: 2;
  }

  header > section {
    flex-direction: column;
  }

  header > section > aside {
    width: auto;
    height: 100px;
  }
}
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <header>
      <section>
        <figure>ð</figure>
        <aside></aside>
      </section>
      <h1>The letter ð</h1>
    </header>
  </body>
</html>

Мне бы хотелось, чтобы буква слева соответствовала следующим ограничениям:

  1. Всегда центрироваться в своем контейнере.(Эта часть работает).
  2. Всегда имейте подкладку вокруг него.Я бы хотел, чтобы отступ составлял не менее 20 пикселей, но в остальном он должен составлять около 20%.
  3. Чтобы решить проблему заполнения, размер шрифта должен уменьшаться / увеличиваться при изменении размера экрана..

Интересно, как мне это сделать.

Обратите внимание, как в разделе «Экран малого рабочего стола» письмо обрезается, и вокруг него нет отступов.В этом случае я бы хотел, чтобы буква была меньше, чтобы вокруг нее было не менее 20 пикселей.В разделе «Полноэкранный рабочий стол» я бы хотел, чтобы буква была немного больше, чтобы отступ составлял около 20%.

Если это вообще возможно, я бы хотел, чтобы там не былолюбые явные жестко заданные размеры (widths / heights / paddings / etc.), основанные на ширине буквы на этом рисунке, потому что я мог бы использовать разные шрифты, поэтому он должен идеально обрабатывать любой шрифт.Если это невозможно, то, тем не менее, заставить этот один пример работать хорошо.

Если это невозможно с CSS, то это было бы полезно знать, тогда в этом случае решение на JavaScript звучит хорошо.Но только CSS предпочтительнее, если это возможно:)

1 Ответ

1 голос
/ 07 мая 2019

Вот мое решение, я использовал vh (высота области просмотра) в качестве единицы для размера шрифта.Это изменит размер шрифта в соответствии с высотой экрана 

header>section>figure {
  ...
  ...
  font-size: 75vh; /* Can be changed as per your design */
}

Если вы хотите, вы также можете поэкспериментировать с использованием vw (ширина области просмотра) для размера шрифта 

html,
body {
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

body>section,
body>header {
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

header {
  display: flex;
  flex-direction: column;
}

header>section {
  display: flex;
  flex-direction: row;
  flex: 1;
}

header>section>figure {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 75vh; /* Can be changed as per your design */
}

header>h1 {
  padding: 10px 20px;
  font-size: 20px;
  background: black;
  color: white;
}

header>section>aside {
  width: 300px;
  display: flex;
  background: red;
}

@media (orientation: portrait) {
  header>h1 {
    order: 1;
  }
  header>section {
    order: 2;
  }
  header>section {
    flex-direction: column;
  }
  header>section>aside {
    width: auto;
    height: 100px;
  }
}
<header>
  <section>
    <figure>ð</figure>
    <aside></aside>
  </section>
  <h1>The letter ð</h1>
</header>
...