Адаптивка для сайта на HTML (вопрос)

Всем привет. Появилась новая задача.
Я сделал небольшой сайт с информацией об интернет-маркетинге. Основная страница (заточенная под ноутбуки) у меня просто выполнена по ширине в 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 и прописывать, верно?

 

@Мефистофель, именно.
Но тут есть одна "фишка":
Если, например, в
@media screen and (max-width: 1000px){

#my-div{display:none;}​

}
То в
@media screen and (max-width: 900px) этот параметр указывать не надо, т.к. он уже задан для более широкого экрана. Можно указать display:block, если нужно. Но display:none в этом случае будет стоять по-умолчанию.

 

При этом мне самому задавать диапазоны форматов для устройства? К примеру, если это смарт, то ставлю стили для smart.css и смарт - это устройство от ХХХpx до YYYpx. Если планшет, то другое... Получается я сам могу проработать дизайн для хоть тысячи устройств. Но есть ли что-то автоматическое для определения того, какие блоки для какого формата переносить?

 

Это верно.

Не тысячи. Обычно используется максимум 3-4 формата вывода.

 

Есть готовые шаблоны. А так же есть фреймворки, типа 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_(фреймворк)

 

@Jonny, благодарю за полезную информацию!