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

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

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

    ruslanos Постоялец

    Регистр.:
    5 мар 2010
    Сообщения:
    116
    Симпатии:
    20
    В интернете я встречал сайты 2 типов:
    1. Широкие, где содержание страницы выводится на полный экран на всех экранах и устройствах;
      Пример citilink.ru
      (При этом есть сайты, у которых приходиться прокручивать содержание страниц горизонтально, а есть сайты, которые идеально выглядят на любых мониторах без прокрутки).
    В чем фишка, как им удается разместить контент без прокрутки?

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

    zek24

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

    ArtyGrand Постоялец

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

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

    matiass Создатель

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

    ruslanos Постоялец

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

    adminlinker Писатель

    Регистр.:
    27 авг 2012
    Сообщения:
    5
    Симпатии:
    3
    Возможно немного не по теме, но поделюсь, есть отличный фрэймворк 960 grid system, с ним можно использовать скрипт adapt.js Перейти по ссылкеПри загрузке страницы он будет подгружать необходимый 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 Shop Script

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

    matiass Создатель

    Регистр.:
    30 май 2007
    Сообщения:
    44
    Симпатии:
    7
    Очень хороший ресурс по адаптивной верстке, правда на английском. Расписано все от а до я и коллекция готовых паттернов есть. Перейти по ссылке