Просто потратил несколько часов на запись на новый сайт... отлично смотрится в моем разрешении, 1366x768... Однако даже спуск до 1024x768 означает, что не все вписывается в ширину экрана!
Пробовал:
<style type='text/css'>
body {width:100%;}
</style>
Это оказывает некоторое влияние на мое разрешение, но не влияет на меньшее разрешение... Как я могу убедиться, что моя веб-страница будет соответствовать 100% во всех разрешениях экрана?
Я использую директиву CSS @media, к сожалению, не поддерживаемую IE8. Соответствующий CSS3 позволяет вам по-разному стилизовывать по ширине окна просмотра:
<style type="text/css">
@media screen and (min-width:1px) and (max-width:1365px) {
...
}
@media screen and (min-width:1366px) {
...
}
</style>
Кстати, у вас есть ошибка в CSS, вы забыли указать единицу:
body {width:100%;}
Одна вещь, которая может вас заинтересовать, - CSS Media Queries. Они не поддерживаются в каждом браузере, IE, например, поддерживает его только с предварительного просмотра версии 9, но они могут помочь с изменением размера окон, а также с меньшими разрешениями, поскольку вы можете применять разные правила CSS для каждого размера экрана.
Кроме того, убедитесь, что ваш макет не является "жестким", т.е. не обрабатывает divs, как таблицы. Сделайте свою ширину на основе процента от родителя или используйте float, чтобы заставить их правильно выстраиваться. Допустимо иметь "минимальную ширину" вашего сайта - обычно 800 или 1024 - принятие того, что пользователям по древним разрешениям, таким как 640x480, просто придется прокручивать.
Вам, скорее всего, придется вернуться к чертежной доске с помощью CSS и спроектировать ее для самонастройки и/или иметь минимальную ширину.
Если вы не хотите делать все измерения размера в процентах, я не думаю, что вы можете. И даже тогда у вас возникнет проблема, если кто-то использует разрешение в другом соотношении сторон или действительно низком разрешении, потому что в первом случае ваша страница будет растянута или сжата, а во втором случае могут возникнуть проблемы с макетом.
Ваш CSS для тега тела выглядит нормально. Но если, например, все DIV в вашем теле имеют фиксированный размер, они никогда не будут заполнять всю ширину. Можете ли вы разместить пример своей страницы?
Люди склонны делать сайты шириной 960 пикселей.
Легко разбить на столбцы с четным размером, поскольку он делится на 3, 4, 5, 6, 8, 10, 12, 15 и 16, плюс он прекрасно вписывается в наименьшее (стоящее) разрешение 1024 пикселей.
Конечно, вы можете использовать жидкостные макеты или различные методы определения разрешения экрана, но если вы используете много изображений, это делает его лаваш.
Я бы порекомендовал вам использовать фреймворк CSS. Они строят основы вашего дизайна, поэтому вам не нужно беспокоиться о таких вещах.
Мой личный фаворит Blueprint, поскольку они заботятся о таких вещах, как типография и стиль, не только макет сетки, что вам нужно.
960gs - еще один популярный, который работает очень похоже на Blueprint. У них также есть несколько инструментов, которые помогут вам настроить вашу разработку и не ограничивают ее как Blueprint.
Это те, которые я использовал раньше, но я уверен, что есть больше нагрузок.
Создайте таблицы стилей макета для наиболее распространенных разрешений... скажем 800x600, 1024x767 и 1280x1024. Затем загрузите их:
<link rel='stylesheet' media='screen and (min-width: 778px)' href='css800width.css' />
Вы можете прочитать больше на CSS-Tricks.