ЭНЦИКЛОПЕДИЯ СОВРЕМЕННОГО САЙТОСТРОЕНИЯ

Лучшее Верстка

Тема в разделе "Другие вопросы по созданию сайта", создана пользователем Мефистофель, 3 фев 2016.

  1. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Репутация:
    +106 / 0 / -0
    Ребят, занимаюсь изучением верстки. Уже измучился, если честно. Все объекты на странице собрал, все хорошо. Начинаю масштабировать - все - труба дело. Подскажите самый хороший на ваш взгляд сервис, чтобы смотреть как отображается сайт на разных устройствах с разным разрешением. У меня на рабочей машинке 1024х600. За нетбуком сижу. Ну и ваши комментарии к расположению объектов/блоков не будут лишними.

    upload_2016-2-3_11-29-0.png

    МАСШТАБ +

    upload_2016-2-3_11-29-36.png

    сайт: madmark.ru
     
    Последнее редактирование модератором: 3 фев 2016
  2. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    757
    Рейтинг:
    143
    Репутация:
    +137 / 0 / -0
    @Мефистофель, ставишь плагин Web Developer для браузера Mozilla. Заходишь на свой сайт. Жмешь в панели Resize -> View Responsive Layouts

    upload_2016-2-3_10-48-52.png

    Результат:

    upload_2016-2-3_10-49-30.png upload_2016-2-3_10-49-55.png
    upload_2016-2-3_10-50-17.png
     
    • Мне нравится [+] Мне нравится [+] x 1
  3. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    757
    Рейтинг:
    143
    Репутация:
    +137 / 0 / -0
    Добавить в CSS:
    Код:
    [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
    Для авто масштабирования логотипа на малых разрешениях экранов.

    В результате будет так:
    upload_2016-2-3_10-57-38.png
     
    • Мне нравится [+] Мне нравится [+] x 1
  4. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    757
    Рейтинг:
    143
    Репутация:
    +137 / 0 / -0
    Для этих блоков:
    upload_2016-2-3_11-4-13.png

    через правило CSS - @media надо менять ширину блока на 100% в мобильном формате.
     
    • Мне нравится [+] Мне нравится [+] x 1
  5. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    757
    Рейтинг:
    143
    Репутация:
    +137 / 0 / -0
    Для всех изображений:
    upload_2016-2-3_11-6-17.png

    Задать:
    Код:
    [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
     
    • Мне нравится [+] Мне нравится [+] x 1
  6. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    757
    Рейтинг:
    143
    Репутация:
    +137 / 0 / -0
    Лого съехал:
    upload_2016-2-3_11-9-16.png

    Было так:
    Код:
    [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
    Сделать так:
    Код:
    [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
    Результат:
    upload_2016-2-3_11-11-33.png

    Можно через @media только для мобильных дописывать: margin: 0 auto;
     
    • Поддерживаю [+] Поддерживаю [+] x 1
  7. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    757
    Рейтинг:
    143
    Репутация:
    +137 / 0 / -0
    оффтоп: сайт стал намного быстрее грузиться, после переноса шрифтов на локал. Правда гугловские еще тянутся:
    Код:
    [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
    Ошибка:
    Код:
    [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
    title должны быть внутри head

    Код:
    [ ** Только зарегистрированные пользователи могут смотреть Код ** ]
     
    • Удачная идея [+] Удачная идея [+] x 1
  8. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Репутация:
    +106 / 0 / -0
    Первое, чем займусь.

    По поводу лого: я просто коряво прописал сам.Создал класс бордер, где правый отступ поставил для того, чтобы рамка обрамляла не весь блок, а только текст (мэдмарк). Класс удалить и прописать границу иначе. Тогда лого не будет уплывать. Это второе, чем буду заниматься.

    Теперь по поводу тайтла внутри хэда - он там и был. Я с валидацией запарился - смотрю что да как и пытаюсь ошибки убрать. Не помню на что ругался, но после переноса за пределы хэда ошибка исчезла. Верну.
     

    Вложения:

  9. Jonny

    Jonny Гуру Команда форума Администратор

    Сообщения:
    757
    Рейтинг:
    143
    Репутация:
    +137 / 0 / -0
    Если ты про ошибку валидации с метрикой - то ее можно поставить перед закрывающим </body> (если внизу ставить). Или после открывающего <body> вверху - тогда ошибка должна устраниться.
     
  10. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Репутация:
    +106 / 0 / -0
    К сожалению на метрику в любом месте ругается.