Дизайн с фиксированной шириной

Опубликовано: 27 Декабря, 2022

На заре всемирной паутины большинство людей использовали настольные компьютеры. В наши дни Интернет доступен на ноутбуках, телефонах, планшетах, автомобилях и т. д. Люди ожидают, что веб-сайт будет хорошо выглядеть на любом устройстве. Адаптивный дизайн делает это возможным.

Адаптивный веб-дизайн — не первый подход к созданию веб-сайтов. Веб-разработчики и дизайнеры перепробовали множество других методов, прежде чем приступить к адаптивному веб-дизайну. Среди различных других методов одним из них был дизайн с фиксированной шириной.

Как следует из названия , «Ширина вашего контента фиксирована» означает, что независимо от размера вашего экрана ширина контента будет неизменной все время. В раннюю эпоху Интернета и всемирной паутины большинство мониторов имели размеры экрана (640 * 480) пикселей , это были ЭЛТ-мониторы (мониторы с электронно-лучевой трубкой). Таким образом, веб-дизайнеры и разработчики подумали, что для них будет более безопасным выбором разработать свой веб-сайт только в соответствии с этими размерами.

Со временем появились экраны размеров: 800*600 пикселей , поэтому разработчики начали чувствовать, что дизайн их веб-сайта для фиксированной ширины 800 пикселей является для них хорошим выбором. Но опять же размеры экрана меняются на 1024*768 пикселей . Теперь разработчики должны были разработать свой веб-сайт в соответствии с этим размером экрана. Это было похоже на бесконечную гонку между веб-дизайнерами, разработчиками и производителями оборудования.

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

Синтаксис:

width: 1015px;

Примечание. Приведенное выше число «1015» является лишь примером, вместо него можно использовать любое значение.

Подход: Фиксированная ширина обычно используется, когда вы не хотите, чтобы ширина вашего контента изменялась в соответствии с изменением ширины экрана. Для этого вы должны объявить свойство ширины в своем коде CSS с некоторым значением в нем. Будь то 640, 800 или 1080 пикселей , выбор одной конкретной ширины для разработки называется дизайном с фиксированной шириной.

Код CSS в приведенном ниже примере демонстрирует дизайн с фиксированной шириной. Вы можете легко видеть, что мы уже определили ширину раздела body как 640 пикселей, что означает, что независимо от размера экрана, тело всегда будет иметь ширину 640 пикселей . И, следовательно, ограничение веб-отзывчивости.

Пример 1: Ниже вы увидите пример макета с фиксированной шириной, где единицы измерения, которые мы используем в коде, указаны в пикселях, что означает, что ширина фиксирована, и она будет хорошо выглядеть только при указанной ширине. Помните, что это дизайн с фиксированной шириной, а это значит, что он будет хорошо смотреться только на экране определенной ширины и не адаптивен. В адаптивном макете мы используем единицы rem/em вместо px.

Выход:

Вы можете легко увидеть на приведенном выше gif, что он не настраивает содержимое по мере изменения ширины экрана, потому что мы уже объявили фиксированную ширину определенных пикселей в нашем коде CSS. Это называется макетом с фиксированной шириной . В макете с фиксированной шириной содержимое не корректируется в соответствии с изменением ширины экрана. Вот почему это выглядит хорошо только на одной определенной ширине экрана. Независимо от размера экрана, контент будет занимать только определенную часть экрана.

Пример 2. В приведенном ниже примере показано сравнение дизайна с фиксированной шириной и адаптивного дизайна.

Выход:

Как вы можете видеть, в приведенном выше GIF-файле черная полоса имеет заданный размер независимо от количества пикселей на экране, а красная полоса меняет размер в зависимости от количества пикселей.