Вопрос следующий: У меня макет, в котором ширины , отступы и т.д указаны для монитора с разрешением 1920х1080 Я прекрасно понимаю, что отступ который задан в картинке будет очень велик для монитора с разрешением, например, 1366х768. Вопрос: как правильно вести расчет в процентах ( для отступов ) ?? ширина в макете / на ширину монитора ? Не хочется использовать медиа-запросы по этому поводу . Да и в принципе, как вести расчет ширин ?
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>
-
-
-
Ага, ты говоришь, что просто использовать flex, при этом, реализовать макет в этом случае будет довольно не тривиальноу– Grundy ♦7 ноя 2016 в 14:57
-
не, я не говорю, что использование флексбокса решит все возможные вопросы (часть из которых в явном виде даже не была озвучена), а лишь говорю, что вертикальное и горизонтальное центрирование одновременно проще всего сделать так. 7 ноя 2016 в 15:04
Если вам предоставили макет только для одного разрешения (самого большого) и вам не хочется использовать медиазапросы, то можно задать отступы и размер шрифта в vh и vw.
vh
- размер относительно высоты экрана
vw
- размер относительно ширины экрана
100vw - равно ширине экрана, причем вне зависимости от размеров и положения родительского блока.
Сопоставить то, что получится с макетом удобнее всего накладыванием полупрозрачного слоя со скриншотом на макет в каком-нибудь редакторе (ну там в фотошопе, например). Так можно достичь крутого пиксельперфекта!)
-
То есть, если я задам margin left 160vW - это разрешит ситуацию в моем случае? 7 ноя 2016 в 12:28
-
-
Я все понял. Значит мне лучше всего накладывать оверлей на макет и подбирать значение . А как в такой ситуации действуете? 7 ноя 2016 в 12:38
-
Если бы мне надо было делать адаптивный сайт по одному дизайну для десктопа, я бы все-таки, использовал медиазапросы и разделил бы все на минимум три версии, чтобы одна из них полностью удовлетворяла макету. Тогда вам придется меньше конфликтовать с заказчиком, ведь кто знает на чем он будет открывать ваш сайт, а так у вас всегда будет возможность апеллировать к утвержденному макету.– Mikl7 ноя 2016 в 12:46