Существует множество существующих CSS - фреймворков, которые предлагают адаптивный дизайн.
Они бесплатны и просты в использовании.
Фреймворк - SW3.CSS
Отличный способ создать адаптивный дизайн-использовать адаптивная таблица стилей, например SW3.CSS
SW3.CSS позволяет легко разрабатывать сайты, которые выглядят красиво в любом размере; компьютер, ноутбук, планшет, или телефон:
SW3.CSS Демо
Измените размер страницы, чтобы увидеть отзывчивость!
Лондон
Лондон является столицей Англии.
Это самый густонаселенный город в Соединенном Королевстве, с пригородами свыше 13 миллионов жителей.
Париж
Париж - столица Франции.
В Париже находится один из крупнейших центров населения в Европе, с более чем 12 миллионов жителей.
Токио
Токио - столица Японии.
Это центр большого Токио и самый густонаселенный мегаполис в мире.
<!DOCTYPE html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/sw3css/4/sw3.css">
<body>
<div
class="sw3-container sw3-green">
<h1>Schoolsw3 Demo</h1>
<p>Измените размер страницы, чтобы увидеть отзывчивость!</p>
</div>
<div
class="sw3-row-padding">
<div class="sw3-third">
<h2>Лондон</h2>
<p>Лондон является столицей Англии.</p>
<p>Это самый густонаселенный город в Соединенном Королевстве,
с пригородами свыше 13 миллионов жителей.</p>
</div>
<div
class="sw3-third">
<h2>Париж</h2>
<p>Париж - столица Франции.</p>
<p>В Париже находится один из крупнейших центров населения в Европе,
с более чем 12 миллионов жителей.</p>
</div>
<div class="sw3-third">
<h2>Токио</h2>
<p>Токио - столица Японии.</p>
<p>Это центр большого Токио
и самый густонаселенный мегаполис в мире.</p>
</div>
</div>
</body>
</html>
Попробуйте сами »
Чтобы узнать больше о SW3.CSS, читайте наш SW3.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.