Адаптивный веб-дизайн - Фреймворки
Есть много 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 Учебник на нашем сайте W3Schools на русском.
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 Учебник на нашем сайте W3Schools на русском.
Популярные CSS-фреймворки
- W3.CSS
- Bootstrap
- Semantic UI
- Foundation
- Materialize
- Bulma
- Agile CSS
- Milligram
- PURE.CSS
- Tailwind CSS
- Tachyons
- Uikit
