1

Отступ от края экрана

Вопрос следующий: У меня макет, в котором ширины , отступы и т.д указаны для монитора с разрешением 1920х1080 Я прекрасно понимаю, что отступ который задан в картинке будет очень велик для монитора с разрешением, например, 1366х768. Вопрос: как правильно вести расчет в процентах ( для отступов ) ?? ширина в макете / на ширину монитора ? Не хочется использовать медиа-запросы по этому поводу . Да и в принципе, как вести расчет ширин ?

2 ответа 2

1

Думаю, всё, что вам необходимо — это вертикальное и горизонтальное центрирование этого элемента. Используйте для этого флексбокс, так добиться этого проще всего.

* {
  margin: 0;
  padding: 0;
}

.content {
  font-family: sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  font-size: 60px;
  text-align: center;
}

  .logo__name {
    font-size: 30px;
  }
  
  .logo__lname {
    font-size: 50px;
  }
<div class="content">
  <div class="content__inner">
    <div class="logo">
      <div class="logo__top">[ O ]</div>
      <div class="logo__name">Sara</div>
      <div class="logo__lname">Wox</div>
    </div>
  </div>
</div>

4
  • в макете скобки заезжают на следующую строку, а у тебя нет
    – Grundy
    7 ноя 2016 в 14:52
  • это точно комментарий по сути моего ответа? 7 ноя 2016 в 14:56
  • Ага, ты говоришь, что просто использовать flex, при этом, реализовать макет в этом случае будет довольно не тривиальноу
    – Grundy
    7 ноя 2016 в 14:57
  • не, я не говорю, что использование флексбокса решит все возможные вопросы (часть из которых в явном виде даже не была озвучена), а лишь говорю, что вертикальное и горизонтальное центрирование одновременно проще всего сделать так. 7 ноя 2016 в 15:04
0

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

vh - размер относительно высоты экрана

vw - размер относительно ширины экрана

100vw - равно ширине экрана, причем вне зависимости от размеров и положения родительского блока.

Сопоставить то, что получится с макетом удобнее всего накладыванием полупрозрачного слоя со скриншотом на макет в каком-нибудь редакторе (ну там в фотошопе, например). Так можно достичь крутого пиксельперфекта!)

4
  • То есть, если я задам margin left 160vW - это разрешит ситуацию в моем случае? 7 ноя 2016 в 12:28
  • 160vw - это 1.6 ширин экрана, т.е. при таком margin-left элемент будет находиться за правым краем экрана. Возьмите значение поменьше, например 30vw. Вот, попробуйте на примере здесь fiddle.
    – Mikl
    7 ноя 2016 в 12:34
  • Я все понял. Значит мне лучше всего накладывать оверлей на макет и подбирать значение . А как в такой ситуации действуете? 7 ноя 2016 в 12:38
  • Если бы мне надо было делать адаптивный сайт по одному дизайну для десктопа, я бы все-таки, использовал медиазапросы и разделил бы все на минимум три версии, чтобы одна из них полностью удовлетворяла макету. Тогда вам придется меньше конфликтовать с заказчиком, ведь кто знает на чем он будет открывать ваш сайт, а так у вас всегда будет возможность апеллировать к утвержденному макету.
    – Mikl
    7 ноя 2016 в 12:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.