Всем привет. Появилась новая задача. Я сделал небольшой сайт с информацией об интернет-маркетинге. Основная страница (заточенная под ноутбуки) у меня просто выполнена по ширине в 100 процентов. Я сделал перестройку некоторых блоков поде еще 2 размера - под смарт вертикальный и горизонтльный. Меня интересует, как мне задать определение формата в HTML чтобы отобразить часть кода страницы под определенный размер.
В CSS прописываем @media screen and (max-width: Хpx){ .my-class{ width:100%; height:300px; background:#fff;} .my-div{ display:none;}} Короче, в CSS задаём стили для экрана с разрешением до X пикселей. Задаём лишь то, что должно меняться. Заново писать всё не нужно. И этих @media screen может быть много.
@Мефистофель, именно. Но тут есть одна "фишка": Если, например, в @media screen and (max-width: 1000px){ #my-div{display:none;}} То в @media screen and (max-width: 900px) этот параметр указывать не надо, т.к. он уже задан для более широкого экрана. Можно указать display:block, если нужно. Но display:none в этом случае будет стоять по-умолчанию.
"часть кода страницы под определенный размер" при верстке сайта используйте стандартный размер, а затем добавляйте нужные медиа-запросы, которые будут менять параметры элементов сайта для нужных вам экранов. Не забудьте также добавить мета-тег вьюпорт в код страницы: <meta name="viewport"content="width=device-width, initial-scale=1.0">
При этом мне самому задавать диапазоны форматов для устройства? К примеру, если это смарт, то ставлю стили для smart.css и смарт - это устройство от ХХХpx до YYYpx. Если планшет, то другое... Получается я сам могу проработать дизайн для хоть тысячи устройств. Но есть ли что-то автоматическое для определения того, какие блоки для какого формата переносить?
Есть готовые шаблоны. А так же есть фреймворки, типа Bootstrap: Bootstrap (фреймворк) Bootstrap (также известен как Twitter Bootstrap — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения. Bootstrap использует самые современные наработки в области CSS и HTML, поэтому необходимо быть внимательным при поддержке старых браузеров Основные преимущества Bootstrap: Экономия времени — Bootstrap позволяет сэкономить время и усилия, используя шаблоны дизайна и классы, и сконцентрироваться на других разработках; Высокая скорость — динамичные макеты Bootstrap масштабируются на разные устройства и разрешения экрана без каких-либо изменений в разметке; Гармоничный дизайн — все компоненты платформы Bootstrap используют единый стиль и шаблоны с помощью центральной библиотеки. Дизайн и макеты веб-страниц согласуются друг с другом; Простота в использовании — платформа проста в использовании, пользователь с базовыми знаниями HTML и CSS может начать разработку с Twitter Bootstrap; Совместимость с браузерами — Twitter Bootstrap совместим с Mozilla Firefox, Yandex Browser, Google Chrome, Safari, Internet Explorer и Opera; Открытое программное обеспечение — особенность Twitter Bootstrap, которая предполагает удобство использования, посредством открытости исходных кодов и бесплатной загрузки. https://ru.wikipedia.org/wiki/Bootstrap_(фреймворк)