Как убедиться, что веб-сайт подходит для всех разрешений экрана?

Question

Просто потратил несколько часов, чтобы написать для нового сайта ... отлично смотрится в моем разрешении, 1366x768 ... Однако, даже уменьшение до 1024x768 означает, что не все подходит под ширину экрана !!

Попробовал:

<style type='text/css'>
    body {width:100%;}
</style>

Это немного влияет на мое разрешение, но не влияет на меньшие разрешения ... Как я могу убедиться, что моя веб-страница будет соответствовать 100% на всех разрешениях экрана?

Answer 1

Я использую директиву 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%;}

Answer 2

Вас может заинтересовать CSS Media Queries . Они не поддерживаются ни в одном браузере, например, IE поддерживает его только при предварительном просмотре версии 9, но они могут помочь с изменением размеров окон и меньшими разрешениями, потому что вы можете применять различные правила CSS для каждого размера экрана.

Кроме того, убедитесь, что ваш макет не является "жестким", т. Е. Не рассматривайте div как таблицы. Сделайте их ширину, основанную на проценте от родителя, или используйте плавающие, чтобы они правильно выстроились в линию. Допустимо иметь «минимальную ширину» вашего сайта - обычно 800 или 1024 - принимая, что пользователям с древними разрешениями, такими как 640x480, просто нужно прокрутить.

Скорее всего, вам придется вернуться к чертежной доске с вашим CSS и спроектировать ее так, чтобы она перенастраивалась и / или имела минимальную ширину.

Answer 3

Ваш CSS для тега body выглядит хорошо. Но если, например, все DIV в вашем теле имеют фиксированный размер, они никогда не будут заполнять всю ширину. Можете ли вы опубликовать пример своей страницы?

Answer 4

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

Answer 5

Создание таблиц стилей для наиболее распространенных разрешений ... скажем, 800x600, 1024x767 и 1280x1024.Затем загрузите их:

<link rel='stylesheet' media='screen and (min-width: 778px)' href='css800width.css' />

Вы можете прочитать больше на CSS-хитрости .

Answer 6

Я бы порекомендовал вам использовать CSS-фреймворк. Они закладывают основы вашего дизайна, поэтому вам не нужно беспокоиться о таких вещах.

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

960gs - еще одна популярная программа, которая очень похожа на Blueprint. У них также есть несколько инструментов, которые помогут вам настроить вашу разработку, и они не такие строгие, как Blueprint.

Это те два, которые я использовал раньше, но я уверен, что есть еще много.

Answer 7

Люди, как правило, делают сайты шириной 960 пикселей.

Его легко разбить на столбцы одинакового размера, так как он делится на 3, 4, 5, 6, 8, 10, 12, 15 и 16, плюс он прекрасно вписывается в наименьшее (стоящее) разрешение в 1024 пикселей .

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