Что такое Adaptive design (адаптивный дизайн)? Что такое Responsive design (отзывчивый дизайн) ?

Праздники ...

Праздники ...

День Святого Валентина (14 Февраля)

Концерты, выставки, цирки ...

Концерты, выставки, цирки ...

Спектакль "Прымаki" г. Минск 23 января, 15 февраля 2026

Спорт занятия ...

Спорт занятия ...

Катание на лыжах !!!

Спорт занятие

Компьютеры, игры, программирование

Компьютеры, игры, программирование

Объявления ...

Объявления ...

ремонт двигателя ММЗ Д243С-863 для экскаваторов

Объявление

Форум (ваши вопросы, обсуждение)

Форум (ваши вопросы, обсуждение)

Программирование, разработка, тестирование

→

Html & CSS

→

Что такое Adaptive design (адаптивный дизайн)? Что такое Responsive design (отзывчивый дизайн) ?

Посмотрели 5347 раз(а)

Что такое Adaptive design (адаптивный дизайн)? Что такое Responsive design (отзывчивый дизайн) ?

последнее обновление: 10 марта 2020

Что такое Adaptive design (адаптивный дизайн)?

Adaptive design (адаптивный дизайн) это при создании страницы сайта создается нескольких шаблонов:
• например для смартфонов создаем страницу с шириной 320 px
• например для планшетов ширина 1024 px
• например для десктоп браузеров 1680 px

Когда пользователь заходит на адаптивный сайт, сервер определяет, при помощи какого устройства осуществляется просмотр, и показывает юзеру нужный шаблон.

Что такое Responsive design (отзывчивый дизайн) ?

Responsive design (отзывчивый дизайн) гибкая структура страницы — «резиновый шаблон».

Помимо «резинового шаблона», используются гибкие изображения (fluid images), «резиновые» текстовые блоки.

При уменьшении ширины такой страницы весь контент плавно сожмется, структурные элементы уменьшатся относительно друг друга.

← Предыдущая тема
Правильная верстка HTML. Плохо использовать table. Нужно использовать div

Следующая тема →
Меняем цвет scrollbar (полосы прокрутки) для HTML страницы. Используем CSS

Ваши Отзывы ... комментарии ...

Экскурсии по Москве

Экскурсии по Москве: пешеходные, автобусные и речные прогулки на любой вкус

Объявления

Объявления

HTML элементы

• HTML тег <a> ссылка для перехода на другую страницу

• HTML тег <abbr> показывает сокращенное название, если подвести мышку будет всплывающая надпись

• HTML теги fieldset и legend. Это рамка с заголовком

• HTML тег  комментарий

• style="border" В HTML

HTML поиск элемента, элементов

• document.querySelector(...) это JavaScript метод для поиска элемента из document (то есть во всем HTML)

• yourElement.querySelectorAll(...) это JavaScript метод для поиска элементов внутри другого HTML элемента

HTML svg (векторная графика для рисования линий, прямоугольников, эллипсов, ...)

• <svg> векторная графика, рисуем линию<line>, прямоугольник <rect>, круг<circle>, текст<text>

HTML canvas (рисование картинок, текста, фигур)

• HTML <canvas> рисуем прямоугольник

• HTML <canvas> рисуем линии по нажатию мышкой на Canvas

• HTML <canvas> рисуем картинки

• HTML <canvas> рисуем картинку с поворотом

• HTML <canvas> рисуем картинку с горизонтальным отражением

• HTML <canvas> рисуем картинку и текст

• HTML <canvas> рисуем картинку много раз в прямоугольнике (шаблон)

• HTML <canvas> как получить координаты мыши ? Определяем позицию мыши.

• HTML <canvas> рисуем змею линиями moveTo, lineTo

CSS

• CSS описание

• После изменения файла css , в браузере раз за разом отображаются старые стили. Почему?

• Книги для изучения CSS

CSS flex (элемент может растягиваться или сжиматься и таким образом заполнять свободное пространство)

• Что такое CSS flex

Freeze

• Шапка в таблице всегда видна при скролинге | freeze header in table | HTML

• Div всегда виден при скролинге (position:fixed, position:sticky) | freeze div | HTML

Делаем Popup используя HTML и Javascript

• Как сделать Popup окно в HTML странице | Javascript, HTML, CSS

Движение и анимация картинок

• Анимация человечка на месте. Используем HTML элемент <div>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"

• Анимация человечка в движении (sprite). Используем HTML элементы <div>, <img>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"

• Рисуем картинку с движением. Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval

• Рисуем картинку с движением и анимацией (sprite). Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval

Web страница на телефоне

• Открываю web страницу на телефоне в Google Chrome. Почему при двойном нажатии размер страницы увеличивается?

Верстка, дизайн страницы

• Что такое Front-end разработка?

• Как определить устройство (планшет, компьютер, телефон) сейчас используется в JavaScript, HTML

• Как сделать чтобы ваш сайт работал на телефоне, планшете, компьютере используем css media и max-device-width и min-device-width | HTML | CSS

• Как сделать чтобы ваш сайт соответствовал по размерам на телефоне, планшете ? (HTML meta с атрибутом name='viewport')

• Правильная верстка HTML. Плохо использовать table. Нужно использовать div

• Что такое Adaptive design (адаптивный дизайн)? Что такое Responsive design (отзывчивый дизайн) ?

• Меняем цвет scrollbar (полосы прокрутки) для HTML страницы. Используем CSS

WWW сайты для изучения

• Сайты для изучения HTML

Ваши вопросы присылайте по почте: info@dir.by