ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

Адаптивный веб-дизайн - Фреймворки


Есть много CSS-фреймворков, которые предлагают адаптивный дизайн.

Они бесплатны и просты в использовании.

Что такое CSS-фреймворк

CSS-фреймворк — это фреймворк (набор готовых стилей), созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т.д.). Как и библиотеки скриптовых языков программирования, CSS-библиотеки, обычно имеющие вид внешнего css-файла, подключаются к проекту (добавляются в раздел <head> веб-страницы).


Преимущества использования CSS-фреймворков

  • Позволяет верстальщику сайтов быстро и правильно создать HTML-макет.
  • Вёрстка производится на базе слоёв, а не таблиц.
  • Кроссбраузерность.
  • Возможность использования генераторов кода и визуальных редакторов.
  • Один стиль кода при работе в команде позволяет снизить число разногласий при разработке.

Использование W3.CSS

Отличным способом создания адаптивного дизайна является использование адаптивной таблицы стилей, например W3.CSS

W3.CSS позволяет легко создавать сайты, которые выглядят красиво в любом размере; настольный компьютер, ноутбук, планшет или телефон:

W3.CSS Демо

Измените размер страницы, чтобы увидеть адаптивность!

Лондон

Лондон - столица Англии.

Это самый густонаселенный город в Соединенном Королевстве, с населением более 13 миллионов человек.

Париж

Париж - столица Франции.

Агломерация Парижа является одним из крупнейших населенных пунктов в Европе с населением более 12 миллионов человек.

Токио

Токио - столица Японии.

Это центр Большого Токио, и самый густонаселенный мегаполис в мире.

Пример

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container w3-green">
  <h1>W3Schools Демо</h1>
  <p>Измените размер этой адаптивной веб-страницы!</p>
</div>

<div class="w3-row-padding">
  <div class="w3-third">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    <p>The Paris area is one of the largest population centers in Europe,
    with more than 12 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>

</body>
</html>
Попробуйте сами »

Чтобы узнать больше о W3.CSS, прочитайте W3.CSS Учебник на нашем сайте.


Bootstrap

Другой популярный фреймворк - Bootstrap, он использует HTML, CSS и jQuery для создания адаптивных веб-страниц.

Пример

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Пример</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>Моя первая Bootstrap страница</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
    ...
    </div>
  </div>
</div>

</body>
</html>
Попробуйте сами »

Чтобы узнать больше о Bootstrap, перейдите на Bootstrap Учебник на нашем сайте.


Популярные CSS-фреймворки