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

Лучшее Адаптивка для сайта на HTML (вопрос)

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

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

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

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Репутация:
    +106 / 0 / -0
    Всем привет. Появилась новая задача.
    Я сделал небольшой сайт с информацией об интернет-маркетинге. Основная страница (заточенная под ноутбуки) у меня просто выполнена по ширине в 100 процентов. Я сделал перестройку некоторых блоков поде еще 2 размера - под смарт вертикальный и горизонтльный. Меня интересует, как мне задать определение формата в HTML чтобы отобразить часть кода страницы под определенный размер.
     
  2. Алексей

    Алексей Веб-мастер Команда форума Эксперт

    Сообщения:
    367
    Рейтинг:
    28
    Репутация:
    +176 / 0 / -0
    В CSS прописываем
    @media screen and (max-width: Хpx){
    .my-class{
    width:100%;
    height:300px;
    background:#fff;​
    }
    .my-div{
    display:none;​
    }​
    }

    Короче, в CSS задаём стили для экрана с разрешением до X пикселей. Задаём лишь то, что должно меняться. Заново писать всё не нужно. И этих @media screen может быть много.
     
    • Мне нравится [+] Мне нравится [+] x 1
  3. Мефистофель

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

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Репутация:
    +106 / 0 / -0
    То есть сколько форматов экрана я планирую переверстать, столько @media screen и прописывать, верно?
     
  4. Алексей

    Алексей Веб-мастер Команда форума Эксперт

    Сообщения:
    367
    Рейтинг:
    28
    Репутация:
    +176 / 0 / -0
    @Мефистофель, именно.
    Но тут есть одна "фишка":
    Если, например, в
    @media screen and (max-width: 1000px){
    #my-div{display:none;}​
    }
    То в
    @media screen and (max-width: 900px) этот параметр указывать не надо, т.к. он уже задан для более широкого экрана. Можно указать display:block, если нужно. Но display:none в этом случае будет стоять по-умолчанию.
     
    • Мне нравится [+] Мне нравится [+] x 1
  5. youni

    youni Новичок

    Сообщения:
    3
    Рейтинг:
    1
    Репутация:
    +1 / 0 / -0
    "часть кода страницы под определенный размер"
    при верстке сайта используйте стандартный размер, а затем добавляйте нужные медиа-запросы, которые будут менять параметры элементов сайта для нужных вам экранов.
    Не забудьте также добавить мета-тег вьюпорт в код страницы:
    <meta name="viewport"content="width=device-width, initial-scale=1.0">
     
  6. Мефистофель

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

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Репутация:
    +106 / 0 / -0
    При этом мне самому задавать диапазоны форматов для устройства? К примеру, если это смарт, то ставлю стили для smart.css и смарт - это устройство от ХХХpx до YYYpx. Если планшет, то другое... Получается я сам могу проработать дизайн для хоть тысячи устройств. Но есть ли что-то автоматическое для определения того, какие блоки для какого формата переносить?
     
  7. Jonny

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

    Сообщения:
    757
    Рейтинг:
    143
    Репутация:
    +137 / 0 / -0
    Это верно.
    Не тысячи. Обычно используется максимум 3-4 формата вывода.
     
    • Мне нравится [+] Мне нравится [+] x 1
  8. Jonny

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

    Сообщения:
    757
    Рейтинг:
    143
    Репутация:
    +137 / 0 / -0
    Есть готовые шаблоны. А так же есть фреймворки, типа Bootstrap:

    Bootstrap (фреймворк)

    Bootstrap (также известен как Twitter Bootstrap — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.

    Bootstrap использует самые современные наработки в области CSS и HTML, поэтому необходимо быть внимательным при поддержке старых браузеров

    Основные преимущества Bootstrap:

    1. Экономия времени — Bootstrap позволяет сэкономить время и усилия, используя шаблоны дизайна и классы, и сконцентрироваться на других разработках;
    2. Высокая скорость — динамичные макеты Bootstrap масштабируются на разные устройства и разрешения экрана без каких-либо изменений в разметке;
    3. Гармоничный дизайн — все компоненты платформы Bootstrap используют единый стиль и шаблоны с помощью центральной библиотеки. Дизайн и макеты веб-страниц согласуются друг с другом;
    4. Простота в использовании — платформа проста в использовании, пользователь с базовыми знаниями HTML и CSS может начать разработку с Twitter Bootstrap;
    5. Совместимость с браузерами — Twitter Bootstrap совместим с Mozilla Firefox, Yandex Browser, Google Chrome, Safari, Internet Explorer и Opera;
    6. Открытое программное обеспечение — особенность Twitter Bootstrap, которая предполагает удобство использования, посредством открытости исходных кодов и бесплатной загрузки.

    https://ru.wikipedia.org/wiki/Bootstrap_(фреймворк)
     
    • Полезно [+] Полезно [+] x 1
  9. Мефистофель

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

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Репутация:
    +106 / 0 / -0
    @Jonny, благодарю за полезную информацию!
     
    • Мне нравится [+] Мне нравится [+] x 1