Я строю макет блога. Цель состоит в том, чтобы контент был центрирован по окну и выровнен с максимальной шириной и минимальным расстоянием до границы окна.
Я получил это, работая с комбинацией max-width и медиазапрос, чтобы установить поля на определенный порог. Я попытался сложить вместе max-width и фиксированные margin-left и margin-right, но это не удалось.
Итак, я решил использовать приведенное ниже решение, где у меня есть max-width в сочетании с margin-left: auto; margin-right: auto и отдельно у меня есть медиа-запрос, в котором я задаю margin-left: 2em; margin-right; 2em.
Это работает в основном нормально, но я очень озадачен медиа-запросом, который мне пришлось определить, чтобы заставить его работать без проблем. CSS ниже, и вы можете увидеть образец страницы здесь .
Я ожидаю, что с max-width: 55em; для моего контента и медиа-запросом, который набирает (max-width: 59em) и поля на любомсторона 2em, что должен быть плавный переход с текстом, никогда не касающимся границы окна.
С версией ниже, я добираюсь до точки перехода, где текст касается края окна длядиапазон размера до того, как поля вступят в силу, и текст отводится от края. Я полагал, что 55 + 4 = 59, и поэтому в 59 я получаю 4em общее количество границ, и текст должен отступить от края в этой точке, поскольку я изменяю размер моего окна меньше;этого не происходит.
.container {
margin-left: auto;
margin-right: auto;
max-width: 55em;
font-family: monospace;
font-size: 16pt;
line-height: 1.3;
text-align: justify;
}
@media screen and (max-width: 59em) {
.container {
margin-left: 2em;
margin-right: 2em;
}
}
.container {
margin-left: auto;
margin-right: auto;
max-width: 55em;
font-family: monospace;
font-size: 16pt;
line-height: 1.3;
text-align: justify;
}
@media screen and (max-width: 59em) {
.container {
margin-left: 2em;
margin-right: 2em;
}
}
<div class="container">
<div class="content">
<article>
Here is a nice long paragraph which should
certainly hit the wrap limit.
It should do this because it is a long paragraph,
with more words and characters than fit in the
maximum width configured for this page.
I have written multiple sentences in a row, to
ensure that this will take ample screen space horizontally.
I am good at writing like this.
</article>
</div>
</div>
Значение, которое работает, как я намереваюсь, ниже, и вы можете увидеть версию здесь . Здесь у меня все тоже самое, кроме медиазапроса: (max-width: 80em). Я попал сюда чисто путем угадывания и проверки. Если я изменю размеры моего окна вниз, я вижу плавный переход, при котором текст никогда не приближается к границе окна или не касается ее.
.container {
margin-left: auto;
margin-right: auto;
max-width: 55em;
font-family: monospace;
font-size: 16pt;
line-height: 1.3;
text-align: justify;
}
@media screen and (max-width: 80em) {
.container {
margin-left: 2em;
margin-right: 2em;
}
}
.container {
margin-left: auto;
margin-right: auto;
max-width: 55em;
font-family: monospace;
font-size: 16pt;
line-height: 1.3;
text-align: justify;
}
@media screen and (max-width: 80em) {
.container {
margin-left: 2em;
margin-right: 2em;
}
}
<div class="container">
<div class="content">
<article>
Here is a nice long paragraph which should
certainly hit the wrap limit.
It should do this because it is a long paragraph,
with more words and characters than fit in the
maximum width configured for this page.
I have written multiple sentences in a row, to
ensure that this will take ample screen space horizontally.
I am good at writing like this.
</article>
</div>
</div>
Итак, мой вопрос один, несколько или все из нижеприведенного:
- Что я здесь не так делаю?
- Какая математика дает 80-4 = 55?
- Как достичь этой цели вместо этого?
Редактировать: Добавление некоторыхGIFS, потому что я плохо объяснил это.
Здесь плохо: обратите внимание, что есть период времени, когда я изменяю размер, когда текст сталкивается с границей окна. Я не хочу этогоЯ ожидаю, что поля 2x2em, которые входят в ширину 59em, должны начать действовать. Вместо этого, во время изменения размера есть период (или некоторая совокупность окон определенного размера), когда текст ударяется о границу окна.
И вот хороший вариант. Это медиа-запрос с max-width: 80em. Это поведение, которое я хочу. Посмотрите, как текст никогда не попадает на границу окна, просто плавно начинает отступать от него. 80em - это магическое число (по крайней мере, для меня, когда я смотрю из нескольких браузеров на моем рабочем столе - я не знаю, является ли это проблемой для меня). Меньше, и я получаю текст, приближающийся к границе, и затем он привязывается к моим полям 2em. Больше, и он выровнен по левому краю, а не по центру.
