прочитал это, и это может помочь
Когда я даю ему запас -1 их, она становится шире. Можете войти сюда и снова изменить значение, ноль, -1 em, ноль, -1 em. Проблема в том, что мне нужно найти точное значение, потому что, если я сделаю это -2 em, внезапно, я получаю полосу прокрутки внизу, и мне разрешено прокручивать влево и вправо, потому что теперь контейнер больше, чем область просмотра. Это просто не сработает. Теперь я уверен, что вы сейчас думаете: «Ну, это не так сложно.
« Все, что вам нужно сделать, это перейти к основному, у которого есть маржа », и здесь вы видите, что маржа 1.4 ems ", а затем просто примените 1.4 em к метате.«Проблема в том, что это не сработает. Понимаете, если я пойду и скажу -1.4 ems здесь, похоже, что он охватывает весь путь, но если вы посмотрите очень внимательно, вы увидите, что здесь есть небольшая белая линия левая и правая стороны. Это потому, что, хотя маржа составляет 1,4 em на главной, на самом деле это 1.4-something em, потому что мы используем размеры em для размера контента, и вы замечаете, что мета-запись имеет размер шрифта 95%.
Это означает, что для получения размера em я должен выяснить разницу между внутренним контейнером и внешним контейнером. Поэтому позвольте мне взять боковую панель и объяснить вам, как могут быть размеры em Мы должны использовать два элемента, прежде чем мы сможем это сделать. Сначала я перейду к основному и узнаю, каков размер шрифта. Посмотрите здесь, размер шрифта 14,4 пикселя, запомните это. Затем мы перейдем к метате и делайте то же самое. Каков размер шрифта он повторно? 13.68 Итак, у нас 14.4 и 13.68.
Теперь для боковой панели, как рассчитать значения em. У нас есть два контейнера. Родительский контейнер имеет размер шрифта 1 em, а вычисленный размер шрифта в браузере - 14,4 пикселя. Вложенный контейнер имеет размер шрифта 95%, а расчетный размер шрифта - 13.68. 13,68 составляет 95% от 14,4. Родительский контейнер имеет разность в 1,4 ems, а в браузере - эквивалент 25.902 пикселей.
Теперь мне нужно выяснить, какое значение em я могу установить во вложенном контейнере, чтобы получить тот же самый 25.902 пикселя. Для этого я собираюсь использовать две формулы. Во-первых, я возьму размер родительского шрифта и разделим его на размер вложенного шрифта. Это дает мне относительную разницу между ними. Когда вы будете делать эту математику, вы, вероятно, придумаете действительно странное число, например, 1.052631 da da da da da da. Теперь нам нужно сохранить это число и добавить его в новую формулу, которая принимает размер родительского em, поэтому в нашем случае 1,4 и раз с относительной разницей, что 1.05
Это дает нам вложенный размер em что нам нужно ориентироваться. В нашем примере результат всей этой математики дает нам 1.47368421052632, и это значение, которое мы собираемся использовать. В промежутке между предыдущим фильмом на этом я внес некоторые незначительные изменения в наш CSS, поэтому, если вы хотите следовать в этот момент, вам нужно захватить файлы упражнений за 06-05. В style.css вы увидите, что здесь, в соответствии с мета-правилом записи, я создал два новых свойства.
Сначала у меня есть значение поля, которое устанавливает верх и низ в ноль, а слева и справа - -1,47368 да да. Это тот номер, который мы только что получили. Затем я сделал то же самое в дополнении, придав коробке прописку с тем же значением. Это сделано так, что если содержимое в этом поле будет располагаться достаточно слева или справа, оно не будет случайно касаться краев окна просмотра. Как вы можете видеть в браузере, добавив эти два свойства, наш контент теперь охватывает всю ширину окна просмотра. Однако, если вы начнете масштабировать область просмотра сейчас, вы заметите, что в какой-то момент вы попадете в точку останова.
И я уже учёл этот пункт перерыва. У нас есть точка разрыва на 30 ems, и здесь мне нужно изменить это значение маржи, потому что в этой точке разрыва маржа вокруг контента переключается с 1.4 на 1.8. В результате мы теперь получаем -1.8947 и т. Д. Так что решает меньшие экраны. Но что из этого большого экрана, где контент плавает посередине? Ну, здесь мы должны сделать что-то совершенно другое, и именно поэтому я прокомментировал этот раздел, чтобы полностью объяснить, что происходит.
Я отчитаю комментарии, а затем посмотрим на этот медиа-запрос. Когда экран шире 57 ems, мы фиксируем ширину основного содержимого и плаваем в центре. Чтобы получить метатету входа, чтобы охватить всю ширину, мы теперь должны выяснить, насколько широка фактическая область просмотра, а затем поместить мета-запись в соответствии с этим. И то, что я здесь сделал, это использовать новую единицу измерения, которая в CSS3 называется vw или шириной видового экрана. Поэтому я настроил его следующим образом. Если браузер поддерживает модуль vw, ширина метаданных будет такой же широкой, как и область просмотра.
Тогда я должен вычесть ширину нашего контента, поэтому 52.2 ems из ширины окна просмотра, но я должен сделать это обратным образом из-за математики. Итак, у нас есть -100 viewport width плюс 52.2. Это дает нам всю ширину окна просмотра минус основное содержимое. И затем я разделил это на два, и сдвиг содержимого влево на это значение. Конечный результат этого, вы увидите, когда я перезагружаю страницу. Теперь контент охватывает всю ширину, но я знаю, что вы скажете: «Но я вижу белый на стороне здесь». Это на самом деле из-за предварительного просмотра этого мобильного вида.
Если я закрою инструменты браузера, вы увидите, что он фактически охватывает всю ширину. Однако эта математика не является точной, поэтому в результате я могу теперь немного прокрутить влево. И это несчастливая реальность, потому что, когда вы используете свойство vw, ширина видового экрана вычисляется, включая полосу прокрутки справа. И прямо сейчас, полоса прокрутки витает над содержимым, то есть мой контент шире, чем вы видите. Это отличается между браузерами, и поэтому мы не можем рассчитывать для полосы прокрутки, поэтому я собираюсь обмануть, чтобы исправить это.
Как мы обманываем здесь, захватывая область содержимого, поэтому вся область и высказывание для области содержимого, я собираюсь заблокировать переполнение-x, которое является горизонтальным переполнением, и просто установите его в скрытый. Таким образом, переполнение, которое происходит из-за этой коробки, просто скрыто, и вы не можете его увидеть. Теперь, благодаря некоторой алхимии CSS, теперь у нас есть область метаконтента, которая имеет полноразмерный фон, независимо от размера экрана.
вы пытались известково свойство CSS, а затем вы можете вычесть некоторую часть из 100vh, и вы можете быть в состоянии удалить эффект прокрутки –
Да, я сделал что-то вроде «border-width: calc (100vw - 17px)», однако это работает только для chrome на рабочем столе. Когда я просматриваю его в браузере, который имеет полосы прокрутки с другим измерением или в мобильном браузере, вещи сдвигаются влево :( – StephenKelzer