Помогите разобраться по размерам сайта и разрешениям экранов мониторов!

Тема в разделе "Верстка", создана пользователем ruslanos, 29 авг 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. ruslanos

    ruslanos Постоялец

    Регистр.:
    5 мар 2010
    Сообщения:
    115
    Симпатии:
    20
    В интернете я встречал сайты 2 типов:
    1. Широкие, где содержание страницы выводится на полный экран на всех экранах и устройствах;

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

    1. Сайты с фиксированной шириной– слева и справа всегда есть отступ, они как бы в рамке.
    Какие оптимальные размеры рамки по ширине, чтобы корректно, без горизонтальной прокрутки отображались на любых экранах и устройствах?
     
  2. zek24

    zek24

    Moderator
    Регистр.:
    14 ноя 2009
    Сообщения:
    776
    Симпатии:
    230
    чтобы было без горизонтальной прокурутки делаешь width: 100%
    http://htmlbook.ru/css/width
    Если нужно точно в пикселях, то тут идеального варианта нет. Смотрим статистику браузеров и пляшем от нее.
     
  3. ArtyGrand

    ArtyGrand Постоялец

    Регистр.:
    6 июн 2009
    Сообщения:
    81
    Симпатии:
    37
    ТС, учи @media запросы, что бы делать сайты по размерам.

    и, кстати, первый пример не на весь экран на 1920px мониторе
     
  4. matiass

    matiass Создатель

    Регистр.:
    30 май 2007
    Сообщения:
    44
    Симпатии:
    7
    Если сайт фиксированый то оптимальная ширина 990px (можно немнго меньше, несколько пикселей чтобы не прилипало к краям и ~15-25px на скролл).
    Простая резина как в первом примере уже не актуальна. Почитай про адаптивную верстку, немного есть тут, пару примеров тут.
    В зависимости от разрешения грузим разные стили, для ИЕ костыль на js, для остальных браузеров Media Queries (С чем едят погуглить, спецификация на w3.org. Здесь немного информации для размышления, есть табличка с разрешениями)
     
    ruslanos нравится это.
  5. ruslanos

    ruslanos Постоялец

    Регистр.:
    5 мар 2010
    Сообщения:
    115
    Симпатии:
    20
    matiass спасибо тебе большое, теперь мне все понятно )))
    скажи пжл почему не актуально?
    я много таких сайтов встречаю
     
  6. adminlinker

    adminlinker Писатель

    Регистр.:
    27 авг 2012
    Сообщения:
    5
    Симпатии:
    3
    Возможно немного не по теме, но поделюсь, есть отличный фрэймворк 960 grid system, с ним можно использовать скрипт adapt.js http://adapt.960.gs/. При загрузке страницы он будет подгружать необходимый css файл в зависимости от разрешения экрана, так же можно настроить какой файл будет подгружен если у пользователя отключен javascript.
     
    ruslanos нравится это.
  7. matiass

    matiass Создатель

    Регистр.:
    30 май 2007
    Сообщения:
    44
    Симпатии:
    7
    Это мое субьективное мнение. Адаптивная верстка (или как говорит википедия - адаптивный дизайн) это по сути потомок резиновой, но на разных разрешениях она выглядит красиво. Плюс в том что не надо делать отдельные версии сайта для планшетов, смартфонов / наладонников. В итоге на разработку уходит меньше времени усилий. Но я не вижу смысла замарачиваться даже с простой резиной если кроме этого для доступности (web accessibility) на сайте ничего не сделано.

    А простая резина часто встречается потому что не так давно про планшеты и наладонники думать не надо было.
     
    ruslanos нравится это.
  8. yhnyhn

    yhnyhn Постоялец

    Регистр.:
    8 июл 2009
    Сообщения:
    61
    Симпатии:
    7
    последние два года стараюсь делать только резиновые дизайны, причин много: разность устройств, платформ и их диагоналей
    принцип предельно простой и осваивается прочтением приведенных выше ссылок, если в двух фразах

    Для тела сайта:
    width:100%;
    min-width:960px;
    max-width:1600px;

    для блоков, колонок:
    например 2 колонки - одна с текстом, вторая с меню

    .one{
    width:59%
    }

    .two{
    width:40px
    margin-right:1%
    }

    Примерно так
     
  9. kadurinho

    kadurinho

    Регистр.:
    21 июн 2011
    Сообщения:
    601
    Симпатии:
    242
    min-width не понимает IE, без хаков или дополнительных скриптов не обойтись. Это не решение. Сколько устройств не держал в руках. всегда верстка в 960-1000 пикселей отлично смотрится на девайсах.
     
  10. matiass

    matiass Создатель

    Регистр.:
    30 май 2007
    Сообщения:
    44
    Симпатии:
    7
    Очень хороший ресурс по адаптивной верстке, правда на английском. Расписано все от а до я и коллекция готовых паттернов есть. http://bradfrost.github.com/this-is-responsive/