Адаптировавшие сайта

Тема в разделе "Верстка", создана пользователем svkarasev, 8 июл 2015.

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

    svkarasev Постоялец

    Регистр.:
    10 ноя 2013
    Сообщения:
    52
    Симпатии:
    2
    Здравствуйте всем
    Подскажите пожалуйста, как быть! Работаю над сайтом http://borodino-promo.ru и по своей не опытности где-то что-то не досмотрел в верстке сайта, при открытии сайта с широкоформатным дисплеем отображение, но если использовать нетбук или планшет или уменьшить окно браузера , то логотип опускается чуть ниже и налазает на первый блок. Пробовал использовать <meta name="viewport" content="width=device-width, initial-scale=1.0">, но тогда на мобильных устройствах и планшетах видно только один рекламный блок и логотип налезший на него.... Подскажите пожалуйста, что я не досмотрел и как это исправить,
    Заранее благодарю

    P/S CSS файл тут ... http://borodino-promo.ru/css/style.css...
     
  2. Helenium

    Helenium Писатель

    Регистр.:
    16 фев 2015
    Сообщения:
    8
    Симпатии:
    0
    bootstrap в таких случаях выручает)

    можно написать отдельно свои стили для смартфонов и планшетов, это верный способ сохранить дизайн на своем месте:
    @media only screen and (min-device-width:320px)
    and (max-device-width:480px) {ваши стили для телефона }
    @media only screen and (min-device-width : 481px)and (max-device-width: 768px){ стили для планшета}
     
    Последнее редактирование модератором: 10 июл 2015
  3. invader

    invader Серый кардинал в отставке :)

    Moderator
    • Супермодератор
    Регистр.:
    3 апр 2006
    Сообщения:
    2.585
    Симпатии:
    5.725
  4. zALEHANz

    zALEHANz Постоялец

    Регистр.:
    26 апр 2015
    Сообщения:
    51
    Симпатии:
    24
    @media (min-width: 992px) {
    .logo img {width:65%}
    }
    В бутстрап приходится зачастую многое прописывать для каждого разрешения
     
  5. spyrius

    spyrius Создатель

    Регистр.:
    30 сен 2011
    Сообщения:
    19
    Симпатии:
    7
    Еще можно выводить разные версии логотипа для небольших разрешений экрана и по-разному их позиционировать:

    Код:
    @media only screen and (max-width: 959px) {
       .site-title img {
          display: none;
       }
       .site-title a {
          display: inline-block;
          background: url("http://yoursite.com/uploads/logo2.png") no-repeat center center;
          background-size: contain;
          width: 220px;
          height: 40px;
       }
    }
    
    @media only screen and (max-width: 519px) {
       .site-title a {
          background-image: url("http://yoursite.com/uploads/logo3.png");
          width: 100px;
          height: 44px;
       }
    }
     
  6. Smooch

    Smooch Создатель

    Регистр.:
    7 фев 2014
    Сообщения:
    10
    Симпатии:
    7
    Может и не актуально уже.
    Сам сайт уже закончен? Рекомендую сначала разобраться с ошибками... посмотрите в консоли, их там хватает.
    Очень много всего не нужного в стилях, я бы просто посоветовал отдать в работу опытному верстальщику, себе время и нервы сэкономите.

    Но если все таки сами хотите пройти этот путь, то изначально верстайте по принципу "mobile-first"... то есть, прежде чем писать стили, представить как это должно отображаться на устройствах. Мне лично без макетов не понятно что требуется сделать с логотипом, если просто уменьшить для мобильных устройств, то используйте ширину в процентах и max-width, min-width, если растянуть по ширине, то как писали выше у вас есть классы бутстрапа. Хотя тянуть весь бутсрап еще и с шрифтовыми иконками тут совсем ни к чему, от него можно было взять только сетку и то для сетки есть более легкие решения.
     
  7. deneos

    deneos Создатель

    Регистр.:
    24 май 2009
    Сообщения:
    30
    Симпатии:
    0
    тоже порекомендую бутсрап 3, сам недавно стал его применять практически на всех сайтах, но его тож надо допиливать ручками
     
  8. tovGANs

    tovGANs Создатель

    Регистр.:
    19 июн 2012
    Сообщения:
    38
    Симпатии:
    4
    Если разобраться в бутстреп хорошо, то дописывать много там не надо. Там много уже прописано и просто нужно уметь этим пользоваться. Я поначалу тоже простыню целую писал, пока не вник что да как.
    К тому же, так как это framework, то можно подключать только то, что действительно необходимо. Не забывайте, что браузер может в один момент захлебнуться от количества правил.
     
  9. zALEHANz

    zALEHANz Постоялец

    Регистр.:
    26 апр 2015
    Сообщения:
    51
    Симпатии:
    24
    Вы не согласны с моей записью? Предложите вариант лучше. Я тоже бутстрапом не первый день пользуюсь и делаю свои шаблоны для джумлы на его основе, и знаю, что говорю, прописывать приходится многое, да в бутстрапе много готовых стилей, но это не значит, что в каждом частном случае нужно брать готовые классы, которые все равно приходится допиливать под свой дизайн сайта.
     
  10. Smooch

    Smooch Создатель

    Регистр.:
    7 фев 2014
    Сообщения:
    10
    Симпатии:
    7
    Уже много было споров на счет бутстрапа, хорошо или плохо дело каждого. Я лично для себя сделал вывод что для небольших индивидуальных сайтов он только нагружает файлы стилей лишними свойствами. Зачем тянуть целую "кучу строк" той же сетки из бутстрапа если по шаблону используется всего 4 колонки. Бутстрап отлично подходит для простых задач в сложных проектах или когда совсем простенький однотипный сайт нужно сделать, в остальном у многих уже свои собственные фреймворки и наработки есть
     
Статус темы:
Закрыта.