Блог Тимура Казанского

Как легко сделать адаптивный дизайн сайта


Привет всем читателям моего блога! Сегодня я расскажу и покажу, как легко сделать адаптивный дизайн или резиновую разметку сайта или блога с помощью css. Для примера, возьмем блог, который мы начали создавать в Уроке 6. Элементы div на примере создания блога.

Наш блог написанный на html готов

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

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

Не адаптивный дизайн

Посмотрите сами, блог отображается не по всему экрану мобильного устройства, кнопки навигации едва различимы, не говоря уже про шрифт, который прочитать практически не представляется возможным. А если учитывать, что только в 2011 году по скромным меркам использовалось 5,2 млрд. телефонов, то я думаю, на это стоит обратить внимание, так как благодаря адаптации вашего сайта, вы можете получить ощутимую прибавку посетителей (трафика) на ваш сайт или блог. Но что нужно сделать для этого? Просто выполнить два несложных шага, а именно:

  • 1. Переделать фиксированную разметку нашего блога или сайта на резиновую, заменив при этом, все горизонтальные размеры с пикселей (px), на пропорциональную единицу измерения (em) и проценты (%);
  • 2. Использовать один из медиазапросов css «media screen» для улучшения отображения сайта на мобильном устройстве имеющего маленькие размеры экрана.

А теперь, давайте по порядку.

Переделываем фиксированную разметку сайта на резиновую.

Как я уже говорил выше, нам нужно заменить все горизонтальные размеры с пикселей «px» на пропорциональные единицы измерения «em». Если посмотреть на текущий вариант нашего блога, то мы можем видеть следующие css правила.

body, .shapka, .navigaciya, .podval {
width: 1200px;
}
.shapka, .navigaciya, .podval {
clear: both;
}
.kolonka {
float: right;
margin-left: 20px;
width: 200px;
padding-bottom: 200px;
padding-top:20px;
font-size: 1.2em;
}
p {
margin: 0.5em 0.25em;
color: black;
}
h1 {
font-size: 1.75em;
border: solid #594846;
border-width: 2px 0;
padding: 0.25em;
text-align: center;
font-variant: small-caps;
}
.podval {
background-color: grey;
color: #f9f3e9;
text-align: center;
padding: .5em 0;
clear: right;
}

Первое что нам нужно сделать, это установить ширину всего контекста (сайта) равным 100% и уже потом устанавливать размеры в процентном соотношении для других областей (частей) сайта, таких как левая, правая колонка, навигационное меню и так далее. Что это значит?

Если вы обратили внимание, то фиксированная ширина выше представленного блога составляет 1200 px (width: 1200px;), т.е. это ширина всего блога, и что бы вы не делали, она не изменится. Если мы заменим эту величину на 100% (width: 100%;), то после этого, ширина блога (сайта) будет не четко регламентирована определенным размером и будет соответствовать ширине экрана любого устройства.

Но это еще не все, так как остальные части нашего сайта (блога) все еще имеют фиксированные значения, мы продолжаем устанавливать размеры в процентах (%) и для остальных частей сайта (которые имеют ширину width). Но как рассчитать точные размеры в процентах, для остальных частей сайта, чтобы все осталось на месте и никуда не съехало? Очень просто, используем следующую формулу:

Формула для адаптивной разметки

Применение формулы для резиновой разметки

По этой же формуле рассчитываем размеры и для других частей сайта, если они имеются, в нашем же случае, мы устанавливаем размер только для левой колонки «Категории блога».

Также не забываем про шрифты, чтобы они были гибкими, необходимо установить размер в 100% , например «font: 100% serif;». В нашем же случае шрифты уже адаптированы с помощью «em», поэтому мы ничего не трогаем.

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

Ну что ж, давайте посмотрим, что у нас получилось.

body, .shapka, .navigaciya, .podval {
width: 100%;
}
.shapka, .navigaciya, .podval {
clear: both;
}
.kolonka {
float: right;
margin-left: 1em;
width: 16.666667%;
padding-bottom: 200px;
padding-top:20px;
font-size: 1.2em;
}
p {
margin: 0.5em 0.25em;
color: black;
}
h1 {
font-size: 1.75em;
border: solid #594846;
border-width: 2px 0;
padding: 0.25em;
text-align: center;
font-variant: small-caps;
}
.podval {
background-color: grey;
color: #f9f3e9;
text-align: center;
padding: .5em 0;
clear: right;
}

Адаптивный дизайн сайта

Как видите, теперь ширина нашего блога точно соответствует ширине мобильного устройства, но есть одна проблема.

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

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

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

P.S. Также вы можете скачать варианты с фиксированной разметкой и вариант с адаптивной (резиновой) разметкой выше представленного блога.

Категория: Уроки CSS для чайников

Читайте также - самые интересные истории обо мне

Оставьте ваш комментарий

Комментарии: 25

Gravatar

Robertopire

If you are one of those who loved https://creed2full.com/ - Creed II full movie, this will be good news for you, because the sequel to the well known franchise will be introduced in November of this 12 months, but currently the first marketing illustrations or photos were being disclosed. In them you can see the protagonists Michael B. Jordan (Apollo Creed II) and Sylvester Stallone (Rocky Balboa), https://creed2full.com/ - https://creed2full.com/ who are component of the film directed by Steven Caple Jr. The film will carry on the Rocky saga, which this time will be centered on the son of Apollo Creed II and his convulsive everyday living that will take put between the struggle in the ring, exactly where he will search for to avenge the demise of his father. A long street that will be hand in hand with Rocky Balboa. Tessa Thompson, Florian Munteanu and the return of Dolph Lundgren as Ivan Drago are also aspect of the novelties it provides https://creed2full.com/ - Creed II Tailored from the British tv https://widowsfull.com/ - Widows full movie collection of the exact identify, McQueen co-writes this film with Gillian Flynn, the well known author of 'Gone Girl' and the new success of HBO, 'Sharp Objects'. The plot revolves close to a tragedy that has an effect on not only the character of Viola Davis, but also those of Michelle Rodriguez, Cynthia Erivo and Elizabeth Debicki. Liam Neeson, Manuel Garcia-Rulfo, Jon Bernthal and Garret Dillahunt participate in the husbands of the four protagonists who, for the duration of a unsuccessful armed theft, are murdered. Just after the simple fact, their Widows make your mind up to finish the theft not only for the money at stake, but as a measure of survival. Alongside the way, they will meet up with the figures of Brian Tyree Henry and Colin Farrell who, as https://widowsfull.com/ - https://widowsfull.com/ most important antagonists of the movie, take middle stage in this new development. Although there is no official release day for this section of the earth, 'Widows' Will be produced in November in the United States. Look at the trailer here 'Widows' Marks the triumphant return of Steve McQueen to the way just after the large achievement of '12 Years of Slavery ', a movie that in 2013 gained the Oscar for Greatest Picture. 6 yrs just after the premiere, McQueen is all set to return to the ring, now, hand in hand with the quite https://widowsfull.com/ - Widows movie talented Viola Davis.

Gravatar

cynengefl

Hello. And Bye.

Gravatar

eliali

Hello. And Bye.

Gravatar

xaipheira

Hello. And Bye.

Gravatar

vennnile

Hello. And Bye.

Gravatar

etiol

Hello. And Bye.

Gravatar

feran

Hello. And Bye.

Gravatar

Gebzar

Hello. And Bye.

Gravatar

vichi

Hello. And Bye.

Gravatar

Shaylajougs

Принципиально новое обновление "XRumer 16.0 + XEvil": автораспознавание бесплатно и быстро капч Google, Yandex, Фэйсбука, Vkontakte, Bing, Hotmail, Mail.Ru, SolveMedia, а также свыше 8400 других видов captcha, с высокой скоростью - 100 изображений в секунду, и точностью - 80%..100%. В XEvil 4.0 реализовано подключение любых SEO/SMM программ - XRumer, GSA, ZennoPoster, VKBot, A-Parser, и многих других. Доступна абсолютно бесплатная демо-версия. Интересно? см. в Ютубе "XEvil" http://XEvil.net/

Gravatar

nseo-sw.men

You actually make it appear really easy together with your presentation but I in finding this topic to be actually something that I feel I'd never understand. It kind of feels too complex and extremely vast for me. I'm looking forward for your next publish, I'll attempt to get the hang of it! apotek ryd linkoping oppettider nseo-sw.men/how-to-quickly-lose-weight/43373-apotek-ryd-linkoeping-oeppettider.html

Gravatar

LoraPhals

Hello.

Gravatar

nseo-sw.men

I’m not that much of a online reader to be honest but your blogs really nice, keep it up! I'll go ahead and bookmark your site to come back in the future. Cheers big penis experience nseo-sw.men/interesting-for-women/15733-big-penis-experience.html

Gravatar

nseo-sw.men

Hmm it looks like your site ate my first comment (it was extremely long) so I guess I'll just sum it up what I wrote and say, I'm thoroughly enjoying your blog. I too am an aspiring blog blogger but I'm still new to everything. Do you have any tips for inexperienced blog writers? I'd genuinely appreciate it. body shop c vitamin serum nseo-sw.men/diets/78074-body-shop-c-vitamin-serum.html

Gravatar

nseo-sw.men

Greetings! Very useful advice in this particular post! It's the little changes which will make the biggest changes. Many thanks for sharing! c vitamin med bioflavonoider nseo-sw.men/how-to-quickly-lose-weight/92736-c-vitamin-med-bioflavonoider.html

Gravatar

CurtisDib

сайт как метод продвижения https://krutim-all.com/ создание стратегии продвижения сайта, продвижение сайтов образец договора

Gravatar

nseo-sw.men

An outstanding share! I've just forwarded this onto a friend who was doing a little homework on this. And he in fact ordered me breakfast simply because I found it for him... lol. So let me reword this.... Thanks for the meal!! But yeah, thanks for spending the time to talk about this matter here on your internet site. brod med mjolk och jast nseo-sw.men/how-to-quickly-lose-weight/29137-broed-med-mjoelk-och-jaest.html

Gravatar

Derekjep

Hey guys... check this amazing web, Youwill gonna love this : https://zeus2018.com/

Gravatar

svetikDus

Большой ассортимент кассеты мак турбо! Хорошие новости для покупателей и продавцов продукции Gillette! Optovka Net предлагает купить наборы Gillette для для семьи и друзей или для реализации и получения прибыли. Gillette это исключительно качественные продукты, проверенные временем, а также лезвия, купить которые приятно, а продавать выгодно. Внимание, акция! Бритвы Джилет Фьюжен и их модификации Gillette Fusion Proglide и Gillette Fusion Proglide Power выполнены в современном стиле. Рекомендуем функциональные комплекты станок + кассета Gillette Fusion, купить которые по минимальной цене можно заполнив форму на сайте. Максимально возможные скидки! Хорошая оказия заказать Лезвие Gillette Mach3, станок для бритья Gillette Mach 3 Turbo, кассеты для микроимпульсных станков Gillette Power, а также любой другой продукт серии Жилет Мак 3 с максимальной выгодой! Мак Турбо это классика на рынке товаров для бритья, а классика всегда пользуется спросом! Хит продаж - одноразовые станки Gillette. Одноразовые станки для бритья Gillette Gillette 2, Gillette blue, Gillette blue 3, хорошо продаются практически всегда. Внимание, Акция! Наборы Gillette Sensor Excel, Gillette Slalom, Gillette Sensitive, Gillette Venus - это универсальный подарок. В набор Gillette VENUS входят: бритва, станок Gillette venus, кассеты. Исследования показали, что большим спросом у конечных потребителей пользуется бритвенный станок Gillette sensor excel, купить который стало ещё проще через форму на нашем сайте. Опытный клиент предпочтёт купить бритвенный станок известной зарекомендовавшей себя фирмы. Крупным оптовикам предоставляются дополнительные скидки. Заказав у нас продукцию Gillette, вы получаете оригинальную качественную продукцию, максимальную выгоду, надёжные гарантии. Удобная оплата через системы международных платежей. Давние заказчики получат персональные выгодные условия и приятные бонусы. Оформите заявку через сайт http://optovka.net и анкету для регистрации заказа и приготовьтесь к развитию вашего бизнеса!

Gravatar

arrapesaisy

Mylene! Download: http://showfail.info/streaming-serie-gratuit/supernatural/saison-2-complet/episode-17 - Г©pisode 17 streaming . Ukf Dubstep August Remix Bass Boosted Download: http://sicherheit-verifikation-sicherheit.bid/nhac-hot-today/ai-khoc-noi-dau-nay~thanh-ha~tsvbv7mzqq2t81.html - Ai KhГіc Nб»—i Дђau NГ y . Assassin s Creed - The Best Of Jesper Kyd (2016) Score YG [Isohunt.to - Download: http://kulpoosoneras.bid/download/485938/Kong.King.of.the.Apes.S02.German.DL.1080p.WEB.x264-BiGiNT/ - Kong.King.of.the.Apes.S02.German.DL.1080p.WEB.x264-BiGiNT . Charmed 00 - 06 covers only Download: http://bspotcoin.com/welcome-to-mercy-2018/ - Watch Movie . Play A Song For Us Mr Piano Man

Gravatar

nseo-sw.men

I must thank you for the efforts you have put in penning this website. I'm hoping to check out the same high-grade blog posts by you in the future as well. In truth, your creative writing abilities has inspired me to get my own, personal site now ;) coco chanel parfym kicks http://nseo-sw.men/diets/00885-coco-chanel-parfym-kicks.html

Gravatar

nseo-sw.men

Hello, just wanted to mention, I loved this post. It was inspiring. Keep on posting! matleverans samma dag http://nseo-sw.men/healthy-food/66833-matleverans-samma-dag.html

Gravatar

shale.larosh

Мечтаете жить у моря? Решение – это жилой комплекс «Шале Ла Рош» расположенный в экологически чистом поселке Крыма – Гурзуфе. 600 метров до моря, закрытая территория. Квартиры от 2,5 миллионов рублей с пропиской! Ипотека. http://shalelarosh.ru +7-918-469-25-86

Gravatar

shale.larosh

Мечтаете жить у моря? Решение – это жилой комплекс «Шале Ла Рош» расположенный в экологически чистом поселке Крыма – Гурзуфе. 600 метров до моря, закрытая территория. Квартиры от 2,5 миллионов рублей с пропиской! Ипотека. http://shalelarosh.ru +7-918-469-25-86

Gravatar

shale.larosh

Мечтаете жить у моря? Решение – это жилой комплекс «Шале Ла Рош» расположенный в экологически чистом поселке Крыма – Гурзуфе. 600 метров до моря, закрытая территория. Квартиры от 2,5 миллионов рублей с пропиской! Ипотека. http://shalelarosh.ru +7-918-469-25-86