Сайт

Как сделать адаптивный сайт на чистом html: Делаем адаптивный HTML, добавляя одну строку в CSS / Хабр

26.04.2023

Создаём адаптивный сайт

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

Мы будем писать наш код на HTML5, поэтому можно использовать новые семантические элементы, такие как header, footer и т. д. Рекомендуем подключить плагин html5 shiv для корректного отображения сайта в IE и файл reset.css, чтобы сбросить ненужные стили.

Листинг

Сначала мы создадим общий блок «wrapper», секцию для хэдера с названием сайта, слоганом и навигацией. Блок с основным содержимым включает в себя раздел со статьями, раздел с последними новостями, раздел с дополнительной информацией и футер. Мы не создаём ничего особенного, просто делаем структуру страницы и добавляем названия классов и идентификаторов css, чтобы затем подключить стили.


<div>
	<header>
	<h2><a href="index.
 
 html">Site Title</a></h2>
	<h3>Tagline <span>&</span> Some clever comment about the company</h3>
	<nav>
		<a href="#">Home</a>
		<a href="#">About</a>
		<a href="#">Portfolio</a>
		<a href="#">Blog</a>
		<a href="#">Contact</a>
		<div></div>
	</nav>
	</header>
	<section>
		<div>
			<h4>Featured Article :</h4>
			<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. 
			Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, 
			dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur 
			adipiscing elit. <br/> <a href="#">Continue Reading →</a></p>
		</div> <!-- END Featured -->
		<hr/>
		<div>
			<section>
				<h4>Latest Articles :</h4><br/>
				<h5><a href="#">Blog 1</a></h5>
				<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
 
  
				Maecenas faucibus mollis interdum.   <a href="#">Continue Reading →</a></p>
				<h5><a href="#">Blog 2</a></h5>
				<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. 
				Maecenas faucibus mollis interdum.   <a href="#">Continue Reading →</a></p>
				<h5><a href="#">Blog 3</a></h5>
				<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. 
				Maecenas faucibus mollis interdum.   <a href="#">Continue Reading →</a></p>
			</section> <!-- END Left Column -->
			<aside>
				<h5><a href="#">Archives</a></h5>
				<ul>
					<li><a href="#">July 2010</a></li>
					<li><a href="#">August 2010</a></li>
					<li><a href="#">September 2010</a></li>
				</ul>
				<br/>
				<h5><a href="#">Categories</a></h5>
				<ul>
					<li><a href="#">Articles</a></li>
					<li><a href="#">Tutorials</a></li>
					<li><a href="#">Roundups</a></li>
				</ul>
				<br/>
				<h5><a href="#">Social</a></h5>
				<ul>
					<li><a href="#">Facebook</a></li>
					<li><a href="#">Twitter</a></li>
					<li><a href="#">RSS</a></li>
					<li><a href="#">Google+</a></li>
				</ul>
			</aside>
		</div> <!-- END Latest -->
		<div></div>
		<hr/>
		<div>
			<h4>About</h4>
			<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
 
 
 
  
			Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus 
			magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit 
			amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, 
			porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.
			<br/><br/>
			Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl 
			consectetur et. Curabitur blandit tempus porttitor. Donec sed odio dui. Cum sociis natoque 
			penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est 
			at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut 
			fermentum massa justo sit amet risus.</p>
		</div>
	</section>
	<hr/>
	<footer>
		<p>© 2011 - Responsive Website Template</p>
	</footer>
</div> <!-- END Wrapper -->

Наша разметка должна выглядеть так:

Добавляем CSS

Структура CSS

Как вы могли заметить, в разделе head мы подключили шрифт Droid serif из Google Web Fonts API. Давайте установим общие стили и стили для типографики.


body { background: #F9F9F9; color: #222; font-family: 'Droid Serif', serif; font-size: 16px; }

Теперь давайте добавим стили для #wrapper, установим ему резиновую ширину 90% и максимальную ширину (значение max-width).

Основные стили CSS

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


h2 { font-size: 90px;
	font-family: 'Droid Serif', serif;
	line-height: 75px; padding: 10px;
	-webkit-transition-property: font-size;
	-moz-transition-property: font-size;
	transition-property: font-size;
	-webkit-transition-duration: 0.5s, 0.5s;
	-moz-transition-duration: 0.5s, 0.5s;
	transition-duration: 0.
 
 5s, 0.5s;
	-webkit-transition-timing function: linear, ease-in;
	-moz-transition-timing function: linear, ease-in;
	transition-timing function: linear, ease-in;
}
h2 a:hover { text-decoration: none; color: #27B3CF; }

h3 { font-family: 'Helvetica'; font-size: 18px; padding: 10px;
	-webkit-transition-property: font-size;
	-moz-transition-property: font-size;
	transition-property: font-size;
	-webkit-transition-duration: 0.5s, 0.5s;
	-moz-transition-duration: 0.5s, 0.5s;
	transition-duration: 0.5s, 0.5s;
	-webkit-transition-timing function: linear, ease-in;
	-moz-transition-timing function: linear, ease-in;
	transition-timing function: linear, ease-in;
}
h4 { font-family: 'Droid Serif', serif; font-size: 30px; }
h5 { font-family: 'Droid Serif', serif; padding: 3px; margin: 5px 0 0 0; }
h5 a { text-decoration: underline; }
h5 a:hover { text-decoration: none; }

nav { background: #222; padding: 0; margin: 10px 0;}
nav a { color: #F9F9F9; display: block; float: left; padding: 10px; }
nav a:visited { color: #f9f9f9; }
nav a:hover { text-decoration: none; background: #27B3CF; }
nav a:active { position: relative; top: 0; }

.
 
 
 left-col { width: 70%; float: left; }
.sidebar { width: 20%; float: right; margin-bottom: 10px;
	-webkit-transition-property: width;
	-moz-transition-property: width;
	transition-property: width;
	-webkit-transition-duration: 0.5s, 0.5s;
	-moz-transition-duration: 0.5s, 0.5s;
	transition-duration: 0.5s, 0.5s;
	-webkit-transition-timing function: linear, ease-in;
	-moz-transition-timing function: linear, ease-in;
	transition-timing function: linear, ease-in;
}

#featured { padding: 20px; }
#latest { padding: 20px; }
#about { padding: 20px; }

p { padding: 0 5px 0 5px; }
ul { list-style: none; }
ul li { margin: 0 5px; }
footer { padding: 5px; }

Теперь наша страница должна выглядеть таким образом:

Media Queries

Подключим к нашему HTML-документу ещё один CSS-файл с названием media-queries.css. В него мы поместим свойства для различных размеров экранов устройств, это будут свойства для заголовков h2 , h3 и для колонок. 


@media screen and (max-width: 478px) {
	h2 { font-size: 70px; padding: 1px; }
	h3 { font-size: 13px; padding: 1px; }
	body { font-size: 13px; }
}

@media screen and (max-width: 740px) {
	.left-col { width: 100%; }
	.sidebar { width: 100%; }
}
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

Версия для iPhone

Так наш сайт должен выглядеть на iPhone.

Заключение

Благодаря свойству CSS transitions, которое мы добавили в файл CSS, название сайта, слоган и другие текстовые элементы будут изменять свой размер плавно, без резких «скачков».

  • 2.87
  • 1
  • 2
  • 3
  • 4
  • 5

Голосов: 1678 | Просмотров: 4522

На 100% правильный способ делать контрольные точки в CSS — CSS-LIVE

Перевод статьи The 100% correct way to do CSS breakpoints для CSS-live. ru, автор — Дэвид Гилбертсон

Постарайтесь на пару минут забыть про CSS. Не думайте о веб-разработке. Забудьте про цифровые пользовательские интерфейсы.

А когда вы забудете про всё это, хочу, чтоб ваше сознание отправилось в путешествие. В путешествие в прошлое. Назад в детство. В первый ваш день в школе.

Многое тогда было проще, когда единственной вашей заботой было рисовать фигуры и стараться удержать себя в руках.

Взгляните на эти точки. Видите, что некоторые из них собраны в кучки, а некоторые выбиваются? Я хочу, чтоб вы мне разбили их на пять групп, как вам кажется логичным.

Смелей. Убедитесь, что никто не смотрит, и обведите вокруг каждой из пяти групп кружок пальчиком, совсем как тогда в детстве.

Скорее всего у вас получилось что-то вроде этого, так? (Только не говорите мне, что проскроллили вниз, не сделав этого упражнения. Я очень расстроюсь.)

Конечно, те две точки справа можно было обвести по-разному. Если вы объединили их в группу, думаю, это нормально. Говорят, что не бывает неправильного ответа, но я всегда бываю прав, так что мне не приходится выслушивать это пошлое утешение.

Прежде чем я продолжу, вы точно не нарисовали чего-то наподобие такого?

Вряд ли. Правда?

Но именно это по сути вы делаете, когда задаете контрольные точки в положениях, отвечающих точной ширине конкретных устройств (320px, 768px, 1024px).

Доводилось ли вам слышать недоуменное бормотание вроде такого? Или, может, это вы и были?

«Средняя контрольная точка — это до 768px включительно или нет? Так, вижу… а это iPad в портретном режиме, или это уже „большой“? Ага, большой — это от 768px и выше. А маленький — это 320px? Что же тогда такое диапазон от 0 до 319px? Контрольная точка для муравьев?»

Могу на этом остановиться и перейти сразу к правильным контрольным точкам. Но мне любопытно, почему вышеописанный метод («тупая группировка») так распространен.

Почему так вышло?

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

Думаю, в обсуждениях и реализациях контрольных точек мы путаем «границы» и «диапазоны».

Скажите, если вы делаете контрольные точки в Sass, вы заводите переменную $large со значением, скажем, 768px?

Это нижняя граница диапазона, который вы называете large («большой») или верхняя? Если нижняя, то переменной $small быть не должно, потому что это должен быть 0, так ведь?

А если это верхняя граница, то как вы определите контрольную точку $large-and-up («от большго и выше»)? Это должно быть медиавыражение с min-width, равным $medium, так?

А если вы называете так только саму границу, то нас ждет путаница в дальнейшем, потому что медиавыражение — это всегда диапазон.

Получается бардак, и даже думать об этом — зря время тратить. Так что у меня есть три совета:

  1. Выбирайте контрольные точки правильно
  2. Называйте диапазоны со смыслом
  3. Пишите код декларативно

Совет № 1: Выбирайте контрольные точки правильно

Что же такое правильная контрольная точка?

Ваше детсадовское «я» уже нарисовало кружочки. Я лишь сделал вам из них прямоугольники.

600px, 900px, 1200px и 1800px, если собираетесь делать что-то особенное для гигантских мониторов. На всякий случай, если заказываете в интернете «гигантский монитор», уточняйте, что речь про компьютерный. Если вам пришлют старинный бронированный корабль, с вас могут многовато взять за доставку.

Точки, с которыми только что играло ваше детское «я», представляют 14 самых распространенных размеров экрана:

Источник картинки

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

Зря я выбрал оранжевый и зеленый цвета, но не переделывать же теперь все картинки

Совет № 2. Называйте диапазоны со смыслом

Конечно, никто не мешает назвать контрольные точки «папа-медведь» и «маленький-медвежонок». Но если я собираюсь посидеть с дизайнером и обсудить, как должен выглядеть сайт на разных устройствах, я хочу как можно быстрее с этим закруглиться. Если для этого нужно назвать размер планшетом в портретном положении — мне это подходит. Ёлки-палки, да назовите его хоть «iPad в портретном положении», я не обижусь.

«Но расклад же меняется!» — можете воскликнуть вы. «Телефоны растут, планшеты мельчают!»

Но срок годности у CSS вашего сайта — около трех лет (если это не Gmail). iPad с нами уже вдвое дольше, и с трона его пока так и не спихнули. И мы знаем, что Apple уже не делает новых продуктов, а только убирает что-то (кнопочки, дырочки и т.п.) у существующих.

Так что 1024 на 768 — это надолго, ребята. Не надо прятать голову в песок (занятный факт: страусы не водятся в городах, потому что там нет песка, а значит, некуда прятаться от хищников).

Вывод: без общения нет взаимопонимания. Не надо намеренно отказываться от полезных слов.

Совет № 3. Пишите код декларативно

Знаю, знаю, опять это слово «декларативно». Скажу по-другому: ваш CSS должен определять, что в нем должно происходить, а не как это должно происходить. Это «как» лучше спрятать в специальном миксине.

Как мы уже выяснили, изрядная часть путаницы с контрольными точками заключена в том, что переменные, обозначающие границу диапазона, называются так же, как сам диапазон. У $large: 600px попросту нет смысла, если large («большой») — это диапазон. Это всё равно что сказать var coordinates = 4;.

Так что все технические подробности можно упрятать в миксин, а не давать использовать их в коде в открытую. А можно и того лучше — вообще обойтись без переменных.

Следующий пример я поначалу делал как упрощенный. Но на деле, по-моему, он охватывает всё что надо. Можете взглянуть на него в действии на Codepen. Я использую Sass, потому что не мыслю сайта без него. Но логика в CSS или Less будет та же.

@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
  @media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) { @content; }
}
@mixin for-big-desktop-up {
  @media (min-width: 1800px) { @content; }
}

// usage
.my-box {
  padding: 10px;
  
  @include for-desktop-up {
    padding: 20px;
  }
}

Возможно, я пристрастен, но, вроде, вполне симпатичный декларативный CSS

Обратите внимание, что я вынуждаю разработчика указывать суффикс -up («и выше») или -only («и только»).

Неоднозначность плодит путаницу

Можно сходу придраться, что это не работает с произвольными медиавыражениями. Что ж, хорошая новость. Если вам нужно произвольное медиавыражение, напишите его (на практике, если мне понадобится что-либо сложнее вышеприведенного примера, я не стану дурить головы и сразу брошусь в объятья любимой Сюзи с ее инструментами).

Еще одним недостатком можно считать то, что у меня тут восемь миксинов. Конечно, было бы разумно сделать единственный миксин, а потом просто передавать в него нужные размеры, типа такого:

@mixin for-size($size) {
  @if $size == phone-only {
    @media (max-width: 599px) { @content; }
  } @else if $size == tablet-portrait-up {
    @media (min-width: 600px) { @content; }
  } @else if $size == tablet-landscape-up {
    @media (min-width: 900px) { @content; }
  } @else if $size == desktop-up {
    @media (min-width: 1200px) { @content; }
  } @else if $size == big-desktop-up {
    @media (min-width: 1800px) { @content; }
  }
}

// usage
.my-box {
  padding: 10px;
  
  @include for-size(desktop-up) {
    padding: 20px;
  }
}

Да, это работает. Но если вы передадите неподдерживаемое имя, компилятор вам никакой ошибки не покажет. А передать sass-переменную — значит сделать доступными в коде 8 переменных, и лишь для того, чтобы отдать их переключателю в миксин.

Не говоря о том, что синтаксис @include for-desktop-up {...} со всех сторон красивее, чем @include for-size(desktop-up) {...}.

Оба примера кода можно поругать за то, что я дважды пишу 900px, да еще 899px. Конечно же, можно обойтись одной переменной и отнять 1, где нужно.

Хотите этого — флаг вам в руки, но я не стал бы, и вот почему:

  1. Это не то, что часто меняется. Это не те числа, что используются повсюду в коде. От того, что они не переменные, нет никаких проблем — если только вы не хотите дать к контрольным точкам Sass доступ скрипту, вставляющему в страницу JS-объект с этими переменными.
  2. Синтаксис для перевода чисел в строки в Sass ужасен. Внизу — цена, которую вы заплатите за веру в то, что повторение числа дважды — худшее из зол:
@mixin for-size($range) {
  $phone-upper-boundary: 600px;
  $tablet-portrait-upper-boundary: 900px;
  $tablet-landscape-upper-boundary: 1200px;
  $desktop-upper-boundary: 1800px;

  @if $range == phone-only {
    @media (max-width: #{$phone-upper-boundary - 1}) { @content; }
  } @else if $range == tablet-portrait-up {
    @media (min-width: $phone-upper-boundary) { @content; }
  } @else if $range == tablet-landscape-up {
    @media (min-width: $tablet-landscape-upper-boundary) { @content; }
  } @else if $range == desktop-up {
    @media (min-width: $tablet-landscape-upper-boundary) { @content; }
  } @else if $range == big-desktop-up {
    @media (min-width: $desktop-upper-boundary) { @content; }
  }
}

// usage
. my-box {
  padding: 10px;
  
  @include for-size(desktop-up) {
    padding: 20px;
  }
}

Ну как, улучшилась читаемость? Или наоборот?

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

Где сложность, там и баги

Наконец, вы можете подумать «Разве не правильнее отталкиваться в контрольных точках от контента, а не от устройств?». Что ж, круто, что вы дочитали аж досюда, и ответ будет «да»… для сайтов с одним видом раскладки. Или если у вас несколько раскладок и вас устраивает делать свой набор контрольных точек для каждой. Ах да, и еще если дизайн вашего сайта не меняется часто, или вас устраивает обновлять контрольные точки при каждом обновлении дизайна, потому что вам хочется, чтобы они по-прежнему зависели от контента, правда?

Со сложными сайтами жить намного легче, если использовать по всему сайту один и тот же набор контрольных точек.

Всё! Но этой заметке как-то явно не хватает пушистости, дайте-ка подумать, не найдется ли у меня повода добавить немного…

О, придумал!

Добавочные советы по разработке контрольных точек

Да, даже у flickr есть контрольные точки на 768 и 1400

  1. Если хотите увидеть в действии контрольные точки CSS для экранов с разрешением больше чем у монитора, за которым вы сидите, воспользуйтесь «отзывчивым» режимом в отладчике Chrome и введите сколь угодно гигантский размер.
  2. Голубая полоска показывает медиавыражения для ‘max-width’, оранжевая — для ‘min-width’, а зеленая — медиавыражения, в которых есть и то и другое.
  3. Клик по медиавыражению задает экрану такую ширину. Если кликнуть по зеленому медиавыражению несколько раз, он переключается между максимальной и минимальной шириной.
  4. Кликайте правой кнопкой по медиавыражению в панели медиавыражений, чтобы перейти к определению этого правила в CSS.

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

P.S. Это тоже может быть интересно:

Создание адаптивного веб-сайта с использованием чистого CSS — Блог Coding Ninjas

Прежде чем мы начнем создавать адаптивный веб-сайт, давайте разберемся, что это значит. Это не означает, что ваш сайт отвечает пользователю. Если вы думали, что на вашем веб-сайте будет функция чата, которая отправляет пользователям некоторые ответы, вы можете сделать паузу и посмеяться, потому что, когда я начал веб-разработку и познакомился с этой концепцией, я думал так же.

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

Рисунок 1 Мем отзывчивости

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

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

Что сегодня будет строиться?

Существует множество фреймворков, которые позволяют легко сделать ваш сайт адаптивным. Но что, если вы только начали заниматься веб-разработкой, а ваш разум уже переполнен информацией о HTML, CSS и JavaScript? Даже если вы уже хорошо разбираетесь во всех трех технологиях и готовы использовать фреймворк, важно понимать их «закулисье», понимать, как именно реализуется отзывчивость в нескольких строчках кода. .

Всегда помните, что ясность основных понятий ведет к созданию замечательных технологий. Мы создадим базовую веб-страницу, которая будет содержать введение, цитату и несколько обоев Какаши Хатаке , популярного персонажа Наруто. Вступительный текст на веб-странице взят из оригинальной цитаты, написанной Масаси Кисимото (автором серии Наруто), а изображения обоев взяты из Pinterest.

Вот так страница будет выглядеть на мобильном устройстве:

Вот как веб-сайт будет выглядеть на настольном устройстве: 

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

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

Написание кода

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

Это основной скелет нашей веб-страницы. Добавлен «reset.css», чтобы сбросить все стили браузера и убедиться, что ваша веб-страница просматривается одинаково во всех браузерах. После этого была добавлена ​​еще одна таблица стилей «desktop-style.css», это наша основная таблица стилей, которая будет содержать стили, которые сделают наш сайт красивым на рабочем столе.

После «desktop-style.css» добавлен «mobile-style.css». Эта таблица стилей содержит все стили, необходимые для красивой версии нашего веб-сайта на мобильных устройствах. Обратите внимание, что в этом теге ссылки есть еще один атрибут, media. Этот атрибут управляет отображением таблицы стилей. Здесь я добавил свойство, которое позволит запускать mobile-style.css, когда ширина устройства становится меньше 630 пикселей. Вы можете экспериментировать с различной шириной и ориентацией устройства и добавлять столько таблиц стилей, сколько хотите.

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

Здесь я поместил весь контент, который будет отображаться на моей веб-странице, в контейнер, чтобы создать хороший централизованный эффект на экране рабочего стола. Есть раздел заголовка и разные разделы для разного контента. Это помогает сделать ваш код более чистым и читабельным. Я также добавил цитату, чтобы выделить мою любимую цитату на Какаши Хатаке .

В этом разделе собраны все обои и кнопки загрузки. Обратите внимание, что есть две строки, и каждое изображение и связанная с ним кнопка объединены в один контейнер div с классом «элемент обоев». Это поможет выровнять наши элементы так, как мы хотим.

Обратите внимание на теги гиперссылки, если вам интересно, как будет работать кнопка загрузки, позвольте мне сказать вам, что это довольно просто. Просто добавьте атрибут «скачать», когда вы объявляете свою ссылку, и вуаля! Вы превратили обычную кнопку в кнопку, которая поможет пользователям загружать красивые обои для своих мобильных устройств.

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

Это общие стили, которые вы можете использовать не только для этой страницы, но и для любой другой страницы, которую вы хотите создать. Одним из важных свойств, которое сэкономит вам много времени, является «border-box». Оно позволяет вам фактически получить ширину и высоту, которые вы указываете, не задумываясь о добавлении и удалении пространства, вызванного свойствами отступов и полей. Это действительно спасение, когда вы работаете над большим проектом.

На моем рабочем столе я установил ширину контейнера 1000 пикселей и хорошие поля 100 пикселей и некоторые другие свойства стиля границы. Имейте в виду, что мы будем менять стиль контейнера, когда будем писать таблицу стилей для мобильных устройств.

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

Давайте пройдемся по каждому свойству один за другим. Вот где на самом деле начинает строиться отзывчивость вашего сайта. CSS Flexbox — это базовое свойство, позволяющее создавать адаптивные веб-сайты в кратчайшие сроки! Весь контейнер с обоями получил «9».Дисплей 0020: flex ’. Вот как вы можете включить использование flexbox на своем веб-сайте.

Все внутри раздела с обоями класса теперь упаковано во флексбокс. « justify-content: center » выравнивает все внутри флексбокса по горизонтали и центру, а «align-items: center» выравнивает все внутри флексбокса по вертикали и центру. ‘flex-direction: column’ гарантирует, что мои элементы внутри класса обоев будут располагаться друг над другом. Это означает, что контейнеры div с классом row’ будет одна над другой, что даст нам две строки на нашей веб-странице.

Затем контейнер div с классом row также объявляется как flexbox, но теперь flex-направление указано как row, это означает, что три обои внутри ряда будут располагаться друг над другом. Изображения внутри строк имеют отступ в 5 пикселей и ширину, которая составляет почти 1/3 rd ширины контейнера, так что каждое изображение занимает почти одинаковое пространство.

На веб-странице используется еще один flexbox, представляющий собой контейнер div с классом « wallpaper-item ». Здесь свойство flex-direction представляет собой столбец, который означает, что изображение обоев и кнопка загрузки будут располагаться друг над другом.

Кнопка и гиперссылка оформлены в соответствии с темой веб-страницы. Это знаменует собой конец нашего стиля CSS в стиле рабочего стола. Теперь мы начнем стилизовать CSS для мобильных устройств и будем указывать только те свойства, которые мы хотим переопределить в нашей исходной таблице стилей (настольный стиль).

В соответствии с дизайном, который мы видели в начале, мы хотим, чтобы наш контент не имел полей и занимал весь экран мобильного устройства. Следовательно, ширина контейнера была изменена на 100%.

Мы также видели, что изображение также покрывает 100% экрана, поэтому изображение с классом hero-image получило ширину 100%. Это позволит ему покрыть весь экран.

Здесь мы внесли одно небольшое изменение, которое меняет всю перспективу нашей веб-страницы. В row class flex-direction был изменен на столбец вместо row . Это означает, что теперь все три изображения обоев подряд будут отображаться одно поверх другого, создавая эффект, что в каждом ряду существует только одно изображение.

Мы завершили создание адаптивного изображения с использованием исключительно CSS!

Помимо CSS Flexbox, CSS Grids также используются для добавления адаптивных функций. Если вы все правильно поняли в блоге, ваша задача теперь состоит в том, чтобы изучить CSS Grids и создать веб-страницу, которая подходит не только для настольных компьютеров и мобильных устройств, но и для 9. 0007 таблетки . После того, как вы закончите, опубликуйте окончательный результат в своих социальных сетях и отметьте Coding Ninjas.

Приятного обучения!

Пуджа Гера

Создание адаптивного веб-сайта с использованием HTML, CSS и JavaScript на хинди

Введение в HTML, CSS, JavaScript и как работают веб-сайты? | Учебники по веб-разработке #1

Учебник по HTML: установка VS Code и Live Server | Учебники по веб-разработке #2

Учебник по HTML: базовая структура веб-сайта | Учебники по веб-разработке #3

Учебник по HTML: заголовок, сценарий, ссылка и метатеги | Учебники по веб-разработке #4

Учебник по HTML: заголовки и абзацы | Учебники по веб-разработке #5

Учебник по HTML: теги Img и Anchor | Учебники по веб-разработке #6

Учебник по HTML: списки и таблицы | Учебники по веб-разработке #7

Учебник по HTML: формы и теги ввода | Учебники по веб-разработке #8

Учебник по HTML: встроенные и блочные элементы | Учебники по веб-разработке #9

Учебник по HTML: Идентификаторы и классы в HTML | Учебники по веб-разработке #10

Учебник по HTML: Объекты HTML | Учебники по веб-разработке #11

Учебник по HTML: семантические теги в HTML| Учебные пособия по веб-разработке #12

Учебное пособие по CSS: Введение в CSS | Учебники по веб-разработке #13

Учебник по CSS: Встроенный, внутренний и внешний CSS | Учебники по веб-разработке #14

Учебник по CSS: Селекторы в CSS | Учебные пособия по веб-разработке #15

Учебное пособие по CSS: Использование инструментов разработчика Chrome | Учебники по веб-разработке #16

Учебник CSS: Шрифты в CSS | Учебники по веб-разработке #17

Учебник по CSS: Цвета в CSS | Учебники по веб-разработке #18

Учебник по CSS: границы и фон | Учебные пособия по веб-разработке #19

Учебное пособие по CSS: Блочная модель CSS, поля и отступы | Учебные пособия по веб-разработке #20

Учебное пособие по CSS: Float & Clear объяснил | Учебники по веб-разработке #21

Учебник по CSS: Стилизация ссылок и кнопок | Учебники по веб-разработке #22

Учебник по CSS: Создание меню навигации | Учебные пособия по веб-разработке #23

Учебное пособие по CSS: Свойство отображения CSS | Учебники по веб-разработке #24

Учебник по CSS: абсолютное, относительное, фиксированное и липкое положение в CSS | Учебники по веб-разработке #25

Проект 1: Создание веб-сайта тренажерного зала с использованием HTML5 и CSS3 | Учебники по веб-разработке #26

Учебник по CSS: Объяснение видимости и z-index | Учебные пособия по веб-разработке #27

Учебное пособие по CSS Flexbox на хинди | Учебники по веб-разработке #28

Учебник по CSS: единицы em, rem, vh и vw + Объяснение адаптивного дизайна | Учебные пособия по веб-разработке #29

Учебное пособие по CSS: объяснение медиа-запросов | Учебные пособия по веб-разработке #30

Учебное пособие по CSS: Дополнительные сведения о селекторах CSS | Учебные пособия по веб-разработке #31

Учебное пособие по CSS: атрибуты и n-е дочерние псевдоселекторы | Учебники по веб-разработке #32

Учебник по CSS: до и после псевдоселекторов | Учебные пособия по веб-разработке #33

Учебное пособие по CSS: тень блока и тень текста | Учебники по веб-разработке #34

Учебник по CSS: переменные и пользовательские свойства | Учебники по веб-разработке #35

Учебник по CSS: Создание анимации и ключевых кадров | Учебные пособия по веб-разработке #36

Учебное пособие по CSS: Создание переходов в CSS | Учебные пособия по веб-разработке #37

Учебное пособие по CSS: преобразование свойств в CSS | Учебные пособия по веб-разработке #38

Создание проекта полностью адаптивного веб-сайта с использованием HTML и CSS на хинди | Учебники по веб-разработке #39

CSS Grid: введение и создание базовой сетки | Учебники по веб-разработке #40

CSS Grid: создание строк и пробелов в сетке | Учебники по веб-разработке #41

CSS Grid: объединение нескольких строк и столбцов в сетке | Учебники по веб-разработке #42

CSS Grid: Autofit & MinMax | Учебные пособия по веб-разработке #43

CSS Grid: создание макетов с использованием области шаблонов сетки | Учебники по веб-разработке #44

Использование медиа-запросов с CSS Grid | Учебники по веб-разработке #45

Введение в JavaScript для внешнего и внутреннего интерфейса | Учебники по веб-разработке #46

Написание JavaScript в браузере и консоль разработчика | Учебники по веб-разработке #47

Переменные, типы данных и операторы в JavaScript | Учебники по веб-разработке #48

Строки в JavaScript | Учебники по веб-разработке #49

Строковые функции в JavaScript | Учебники по веб-разработке #50

Область действия, условия «если-иначе» и регистр переключения в JavaScript | Учебники по веб-разработке #51

Массивы и объекты в JavaScript | Учебники по веб-разработке #52

Функции в JavaScript | Учебные пособия по веб-разработке #53

Учебное пособие по JavaScript: Взаимодействие — Оповещение, Подсказка, Подтверждение | Учебники по веб-разработке #54

Учебник по JavaScript: циклы for, while, forEach, Do While | Учебники по веб-разработке #55

Учебник по JavaScript: навигация по DOM | Учебники по веб-разработке #56

Учебник по JavaScript: события и прослушивание событий | Учебники по веб-разработке #57

Учебник по JavaScript: setInterval и setTimeOut | Учебники по веб-разработке #58

Учебник по JavaScript: дата и время в JavaScript | Учебники по веб-разработке #59

Учебник по JavaScript: стрелочные функции в JavaScript | Учебники по веб-разработке #60

Учебник по JavaScript: математический объект в JavaScript | Учебные пособия по веб-разработке #61

Учебное пособие по JavaScript: Работа с JSON в JavaScript | Учебные пособия по веб-разработке #62

Учебное пособие по серверной части: Введение и установка Node. Js | Учебные пособия по веб-разработке #63

Учебное пособие по серверной части: модули Node.Js с примерами | Учебники по веб-разработке #64

Backend Tutorial: Блокировка и неблокировка выполнения | Учебные пособия по веб-разработке #65

Учебное пособие по серверной части: блокировка и неблокирующее выполнение | Учебные пособия по веб-разработке #66

Учебное пособие по серверной части: создание пользовательской серверной части с использованием NodeJs | Учебные пособия по веб-разработке #67

Учебное пособие по серверной части: создание пользовательских модулей в узле с помощью NodeJs | Учебные пособия по веб-разработке #68

Учебное пособие по серверной части: npm: Учебное пособие по диспетчеру пакетов Node | Учебники по веб-разработке #69

Backend Tutorial: Установка Express и Postman | Учебные пособия по веб-разработке #70

Учебное пособие по серверной части: написание нашего первого экспресс-приложения | Учебные пособия по веб-разработке #71

Учебное пособие по серверной части: статические файлы и установка механизма шаблонов Pug | Учебные пособия по веб-разработке #72

Учебное пособие по бэкенду: Использование необработанного HTML в шаблонизаторе Pug | Учебные пособия по веб-разработке #73

Учебное пособие по серверной части: Завершение серверной части NodeJs нашего веб-сайта Gym | Учебники по веб-разработке #74

Учебное пособие по серверной части: танцевальный веб-сайт с использованием Pure Pug + NodeJs | Учебные пособия по веб-разработке #75

Учебное пособие по серверной части: разработка карт с использованием Pure Pug + NodeJs | Учебные пособия по веб-разработке #76

Учебное пособие по серверной части: веб-сайт Continuing Dance с использованием Pug + NodeJs | Учебные пособия по веб-разработке #77

Учебное пособие по бэкенду: добавление раздела спонсора с помощью Pug + NodeJs | Учебные пособия по веб-разработке #78

Учебное пособие по серверной части: добавление контактной формы с помощью Pug + NodeJs | Учебники по веб-разработке #79

Учебное пособие по MongoDb: Введение в MongoDb + установка | Учебные пособия по веб-разработке #80

Учебное пособие по MongoDb.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *