Авторизация с помощью Вконтакте Авторизация с помощью Facebook

Мы в Соцсетях:

twitter   Facebook  
1111

Как сделать адаптивную верстку сайта в HTML на CSS, для начинающих с примерами


Сейчас я научу вас верстать адаптивную верстку шаблона для сайтов под любые мобильные устройства и мониторы с разным разрешением экрана. В этом обучении вы получите представление как это делается, и сможете верстать свои адаптивные страницы.

Это обучение я решил создать, чтобы повысить уровень грамотности начинающих веб-разработчиков которые всё ещё верстают обычные страницы сайтов неправильно, и боятся переделать шаблон сайт в адаптивную верстку.
Много где на сайтах вебмастера не доделывают шаблоны сайтов, не задумываются что половина интернета - это уже мобильные устройства с разным разрешением экрана и для них нужно показать сайт удобно, (адаптивно).
Адаптивная верстка так-же влияет положительно на отображение страниц вашего сайта в поисковиках интернета, если шаблон вашего сайта обычный и давно не обновлялся, скорее всего поисковики ваш неподходящий сайт не будут предлагать пользователям интернета.

Начнем.

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

Нам нужно прописать в head метаданные viewport которые будут сообщать любому браузеру что страница сайта умеет работать с любой шириной экрана устройств.

<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
</head>


ниже вам нужно подключить в файл с CSS стилями, или работать в HTML со стилями таким образом:

<body>
<style> 
.text {} /* тут пишите свойства стилей также как вы работаете в файле style.css */
</style>
</body>

если в html прописывать все стили элементов сайта выйдет много строчек, поэтому стили выносим в отдельные файлы .css

Подключаем стили в шаблон, делается это любым из ниже показанных способов: Указываем путь до файла со стилями style.css

<link rel="stylesheet" href="http://syte.com/css/style.css">
<link rel="stylesheet" href="/css/style.css">
<style rel="stylesheet" type="text/css" media="all">@import url(http://syte.com/css/style.css);</style>
<style rel="stylesheet" type="text/css" media="all">@import url(/css/style.css);</style>


получаем такой вид в нашем index.html

я уже добавил для примера элементы сайта чтобы начать писать для них адаптивные стили с @media


<html>
<head>
<title>site name</title>
<meta name="description" content="Описание">
<meta name="keywords" content="ключевые, слова">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<style rel="stylesheet" type="text/css" media="all">@import url(/css/style.css);</style>
</head>
<body>

<div class="block">name logo</div>
  
<div class="all_content">

<div class="content">  
<H1>Adaptive css @media screen FOR viewport</H1>
<p class="story">Давайте расскажем вебмастерам: как сделать адаптивную верстку для нашего сайта. <a href="http://vhodim.net/html/4-kak-sdelat-adaptivnuyu-verstku-sayta-v-html-na-css-dlya-nachinayuschih-s-primerami.html" target="_blank">Перейти по ссылке к чтению материала!</a></p>
</div>

</div>

</body>
</html>


Теперь осталось написать адаптивные CSS стили, в вашем файле style.css путь к которому мы уже указали.

Но давайте на одном CSS элементе, разберем и посмотрим что это этакое,
<div class="content">

что-бы вы запомнили как их прописывать для всего остального сайта.

style.css - указываем все стили для .content

.content {width:100%; max-width:950px; color:#000; background:#b8b8b8; transition:all 0.66s;}
@media screen and (max-width:900px) { .content {background:rgba(61, 49, 114, 0.9); color:#fff;}}
@media screen and (max-width:750px) { .content {background:rgba(61, 49, 114, 0.7); color:#fff;}}
@media screen and (max-width:650px) { .content {background:rgba(61, 49, 114, 0.5); color:#000;}}
@media screen and (max-width:550px) { .content {background:rgba(61, 49, 114, 0); color:#000;}}


Первая строчка - это прописанные стили для элемента class .content

Остальные строчки ниже - это происходящие изменения при разной ширине экрана, которые будут передаваться в class .content

max-width:900px - это свойство при максимальной ширине которую мы устанавливаем

Как вы заметили я выставил несколько значений max-width:; с разной шириной которая указывает на уменьшение ширины - я это делаю для того что-бы отображать при разной ширине экрана новые свойства стилей которые я им указываю.
Вот собственно и всё, я вас поздравляю вы обрели первые знания по адаптивной верстке. Я очень подробно рассказывал что-бы всем было понятно.

И давайте покажу немного магии: сделаем плавный переход из одного состояния в другое при помощи одного свойства в CSS transition:;

Обратите внимание, в первой строчке я прописал свойство transition:; таким образом я дал указание браузерам: изменять свойства этого элемента с задержкой 66 милисекунд.

transition:all 0.66s;
.content {width:100%; max-width:950px; color:#000; background:#b8b8b8; transition:all 0.66s;}


А теперь закрепим материал и посмотрим на общий пример как выглядит адаптивная верстка с @media запросами. HTML + CSS.

HTML разметка - в - index.html

<html>
<head>
<title>site name</title>
<meta name="description" content="Описание">
<meta name="keywords" content="ключевые, слова">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<style rel="stylesheet" type="text/css" media="all">@import url(/css/style.css);</style>
</head>
  
<body>  
<div class="block">name logo</div>
  
<div class="all_content">
<div class="content">  
<H1>Adaptive css @media screen FOR viewport</H1>
<p class="story">Давайте расскажем вебмастерам: как сделать адаптивную верстку для нашего сайта. <a href="http://vhodim.net/html/4-kak-sdelat-adaptivnuyu-verstku-sayta-v-html-na-css-dlya-nachinayuschih-s-primerami.html" target="_blank">Перейти по ссылке к чтению материала!</a></p>
</div>
</div>
  
</body>
</html>


CSS стили - в - style.css

* {transition:all .06s; max-width:100%;}
body {background:#eaeaea; margin-left:auto; margin-right:auto; padding-left:5px; padding-right:5px; max-width:950px;}

/* Делаем адаптивные элементы @media screen для viewport, при изминении ширины экрана меняются стили сайта */
H1 {color:#000; transition:all 0.66s; font-size:32pt;}
@media screen and (max-width:900px) { H1 {color:#fff; font-size:25pt;}}
@media screen and (max-width:750px) { H1 {color:#fff; font-size:22pt;}}
@media screen and (max-width:650px) { H1 {color:#000; font-size:20pt;}}
@media screen and (max-width:550px) { H1 {color:#000; font-size:18pt;}}

.story {color:#000; transition:all 0.66s;}
@media screen and (max-width:900px) { .story {color:#fff;}}
@media screen and (max-width:750px) { .story {color:#fff;}}
@media screen and (max-width:650px) { .story {color:#000;}}
@media screen and (max-width:550px) { .story {color:#000;}}

.block {width:100%; max-width:950px; height:50px; color:#fff; background:#4a9dd2; font-weight:bold; transition:all 0.66s;}
@media screen and (max-width:900px) { .block {background:#6BD25B; color:#000; font-weight:normal;}}
@media screen and (max-width:750px) { .block {background:#765BD2; color:#fff; font-weight:normal;}}
@media screen and (max-width:650px) { .block {background:#D25BB5; color:#000; font-weight:bold;}}
@media screen and (max-width:550px) { .block {background:#B30017; color:#fff; font-weight:normal;}}

.all_content {width:100%; max-width:950px; background:#b8b8b8; transition:all 0.66s;}
@media screen and (max-width:900px) { .all_content {background:#6BD25B;}}

.content {width:100%; max-width:950px; color:#000; background:#b8b8b8; transition:all 0.66s;}
@media screen and (max-width:900px) { .content {background:rgba(61, 49, 114, 0.9); color:#fff;}}
@media screen and (max-width:750px) { .content {background:rgba(61, 49, 114, 0.7); color:#fff;}}
@media screen and (max-width:650px) { .content {background:rgba(61, 49, 114, 0.5); color:#000;}}
@media screen and (max-width:550px) { .content {background:rgba(61, 49, 114, 0); color:#000;}}


Демо посмотреть можно тут: https://codepen.io/ZhekaOloloev/pen/gXBdXK
Просмотров: 34
HTML / CSS
Вернуться назад
Ещё:

Вы зашли на сайт как незарегистрированный пользователь.
Рекомендуем зарегистрироваться либо войти на сайт под своим именем.

Добавить комментарий

0 Комментариев

Популярные посты:

  • Windows 7 и два монитора, UltraMon добавит панель задач на второй монитор!
  • Мистер Робот
  • Как в .htaccess объединить домены если у вас их несколько
  • Как посмотреть код страницы если владелец сайта отключил правую кнопку мыши
  • Как сделать адаптивную верстку сайта в HTML на CSS, для начинающих с примерами
  • Разметка HTML страницы
  • Хакеры (1995)
  • © 2017, vhodim.net