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