CSS: фиксированный или плавающий макет? [закрыто]

Question

Мой вопрос вращается вокруг CSS Fixed Layout против Float Layout, который расширяется до ширины браузера.

Сейчас я сталкиваюсь с проблемой изменения размера заголовка в зависимости от ширины страницы (что, как я понимаю, невозможно, учитывая текущую реализацию в браузере CSS3's background-image: size; ). На данный момент, я чувствую, что попал в тупик вокруг: я переделываю сайт, чтобы использовать фиксированный макет CSS, или я сохраняю текущий макет и пытаюсь сделать растровое изображение расширенным, чтобы заполнить большую часть предоставленного пространства ? Кроме того, каковы плюсы и минусы перехода к макету с фиксированной шириной и другие (невидимые) последствия использования одного макета над другим?

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

Изменить: Есть еще мысли?

Answer 1

Как насчет раскрытия более или менее изображения при изменении размера браузера, а не масштабирования изображения? Это не совсем тот же эффект, но это простой способ заполнить все пространство изображением.

Давайте для примера предположим, что фоновое изображение вашей мачты содержит какой-то логотип поверх, скажем, фотографии городского горизонта. В целом это ширина 1600 пикселей. Логотип находится слева от изображения, а городской пейзаж простирается далеко вправо. И мы предположим, что ваша разметка выглядит примерно так:

<div id="page">
  <div id="masthead">...</div>
  <div id="navigation">...</div>
  ...
</div>

Мы можем установить для элемента #page эластичной ширины и применить фоновое изображение к элемент #masthead:

#page {
  max-width: 1600px;
  min-width: 800px;
  width: 80%;
}

#masthead {
  background: url('path/to/image.jpg') no-repeat left top;
  height: 100px;
  width: auto;
}

Здесь происходит то, что элемент #masthead будет расширяться до ширины элемента #page, которая будет иметь ширину от 800 до 1600 пикселей (включительно) в зависимости от ширины окна браузера. Когда элемент #page имеет ширину 800px, вы видите только самые левые 800px горизонта; когда он шириной 1600px, вы видите весь горизонт. Таким образом, ваш логотип всегда виден, а при изменении размера браузера открывается больше городского пейзажа.

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

Answer 2

Что это за изображение? Любая часть этого повторяется? Иногда используются два слоя: один или тег для повторяющегося элемента изображения, а другой - для фиксированного элемента.

Можем ли мы увидеть пример? Было бы проще найти правильный ответ для вашей проблемы.

Answer 3

Если вы пытаетесь расширить фоновое изображение до ширины страницы, лучше использовать макет фиксированного размера, так как не существует кросс-браузерного метода, чтобы фоновое изображение расширялось до различных размеров, которые зависит от разрешения посетителей.

Макеты с фиксированной шириной обеспечивают большую гибкость для дизайнера, но не для посетителя. Если вы создадите макет шириной X пикселей, то сможете точно настроить пиксель за пикселем своего сайта, тогда как & Quot; float & Quot; макеты (я называю их жидкими макетами) полностью основаны на процентных значениях и, следовательно, отличаются от компьютера к компьютеру. Я нахожу это трудным, потому что вы можете протестировать макет на экране и не знать, как он выглядит у кого-то другого, и (например) поле в 20px больше влияет на макет с фиксированной шириной 768px или 960px, чем на жидкокристаллический экран размером 1280 пикселей.

Основным недостатком IMO для макета с фиксированной шириной является тот факт, что он выглядит слишком маленьким на больших экранах и слишком большим на меньших экранах. Раньше 768px было довольно стандартным макетом с фиксированной шириной, но теперь это слишком мало, так как мир отходит от 800x600. Теперь 960px является довольно стандартным, который слишком велик для 800x600, но все еще слишком мал для 1280x1024.

Все зависит от вашей аудитории и от того, как ваш сайт сочетается. Некоторые макеты можно сделать жидкими и работать отлично, в то время как другие должны быть исправлены (как тот, который вы описали).

Answer 4

Почему бы не использовать тег < img > для изображения заголовка (заголовка) вместо использования фонового изображения?

Я бы посоветовал не масштабировать заголовок; большинство браузеров ужасны при масштабировании изображения (что такое ближайший сосед?), и для многих это выглядит не очень хорошо.

Я сам за разметку жидкости / поплавка / жидкости. На самом деле, большинство моих сайтов используют один столбец, поэтому мне не нужно беспокоиться обо всех сложностях & Quot; normal & Quot; макеты сайта есть.

Answer 5

Обычно плохая идея создавать макет, в котором текстовые столбцы расширяются до браузера. Текст становится трудно читать, если строки становятся длинными. Я рекомендую использовать фиксированный текст для столбца текста, шириной около 50 букв.