Одинаковое положение

281

26 ноября 2016, 19:42

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

Answer 1

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

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

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

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

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

Answer 2

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

* { 
  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>