CSS3 Адаптивный веб дизайн - Фреймворк
Существует множество существующих CSS - фреймворков, которые предлагают адаптивный дизайн.
Они бесплатны и просты в использовании.
Фреймворк - 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 Demo</h1>
<p>Измените размер страницы, чтобы увидеть отзывчивость!</p>
</div>
<div
class="w3-row-padding">
<div class="w3-third">
<h2>Лондон</h2>
<p>Лондон является столицей Англии.</p>
<p>Это самый густонаселенный город в Соединенном Королевстве,
с пригородами свыше 13 миллионов жителей.</p>
</div>
<div
class="w3-third">
<h2>Париж</h2>
<p>Париж - столица Франции.</p>
<p>В Париже находится один из крупнейших центров населения в Европе,
с более чем 12 миллионов жителей.</p>
</div>
<div class="w3-third">
<h2>Токио</h2>
<p>Токио - столица Японии.</p>
<p>Это центр большого Токио
и самый густонаселенный мегаполис в мире.</p>
</div>
</div>
</body>
</html>
Редактор кода »
Чтобы узнать больше о W3.CSS, читайте наш W3.CSS Учебник.
Фреймворк - Bootstrap
Другой популярный фреймворк - Bootstrap, он использует HTML, CSS и jQuery для создания адаптивных веб страниц.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title>Пример
Боотстрап</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.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div
class="jumbotron">
<h1>Мой Боотстрап</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 Учебник.
