Основы адаптивного дизайна
В этой статье я попытаюсь рассказать, как сделать простой шаблон адаптивным. И, конечно же, я попытаюсь объяснить, что такое адаптивный дизайн.
Что такое адаптивный дизайн?
Я уверен, что вы часто «серфите» по сайтам с мобильных устройств и не раз замечали, что есть сайты, где надо масштабировать страницу, чтобы прочитать текст. А бывает, что еще хуже — текст может не поместится на всю страницу и вам придется крутить страницу и по горизонтали, и по вертикали.
Зайдя на сайт с адаптивным шаблоном все меняется, ибо текст «подстраивается» под ваш телефон (разрешение экрана).
Теория (основы)
Думаю, всем известно, что все шаблоны (их стиль) построен на CSS. И адаптивный дизайн — не исключение. Наиболее важное изменение — изменение единиц измерения. Представим, ширина блока 400 пикселей, а значит, что ее надо указывать в процентах (например, 40%).
max-width и width
Тоже очень важная часть в дизайне. Например, ширина нашего сайта 1000 пикселей, но при изменение окна (по ширине, меньше 1000 пикселей), появится горизонтальная прокрутка. Но все поменяется, если мы укажем width: 100%, ибо сайт будет «подстраиваться» под наш экран.
С большими мониторами не так все просто, поскольку текст растянется на весь экран. А получается, если монитор широкоформатный, то текст будет нечитабельным.
Если вам нужно, чтобы сайт остался с такой же шириной, но при этом остался «адаптивным» — надо изменить CSS-код, как указано ниже.
width: 100%; max-width: 1000px; min-width и width
Если чуть выше мы ставили максимальную ширину, то здесь мы устанавливаем минимальную ширину. К примеру, если установить минимальную ширину 200 пикселей, то окно браузера достигает этой ширины и оно больше не будет уменьшаться (появится горизонтальная прокрутка).
Практика
Шаблон, который будет выступать в качестве демонострации, будет иметь в себе три составляющих: шапка, основной контент и боковая колонка (сайтбар).
Логотип Основной контент
Здесь будет находится основной контент страницы
Текст сайтбара
Содержимое сайтбара
* < margin: 0; padding: 0; >body < width: 100%; height: 100%; color:#333; background: url(images/body.png) 0px 0px repeat; font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:0.94em; line-height:135%; >h1 < font-size:30px; font-weight:normal; padding:0px 0 0px; line-height:100%; font-style:italic; >a < color: #cd5252; text-decoration:none; >a:hover < color:#963c3c; text-decoration: none; >/* ------------------------------- Структура ----------------------------------*/ /* ------------------------------- Ширина сайта в 1000px ----------------------------------*/ #wrapper < margin-top:40px; border:0px solid #000; width: 100%; max-width:1000px; margin: 0 auto; height: auto !important; >/* ------------------------------- Шапка сайта ----------------------------------*/ #headerInner < border: 0px solid #000; background: #d04942; position:relative; width:100%; max-width:1000px; height:100px; margin:0 auto; margin-top:0px; >.text < margin:15px; >/* ------------------------------- Главный контент ----------------------------------*/ #content #colLeft < border: 0px solid #000; float:left; width:67%; margin-right:0px; background: #85c9cf; >/* ------------------------------- Сайтбар сайта ----------------------------------*/ #content #colRight < position:relative; margin-left:30px; float:left; width:30%; border: 0px solid #1FA2E1; background: #7a9e0e; >#middle:after < content: '.'; display: block; clear: both; visibility: hidden; height: 0; >/*---------------------------- Логотип ------------------------------*/ .logo < position:absolute; left:0px; top:40px; >.logo a
Как вы заметили, ширина шаблона 1000 пикселей. В шаблоне используется width и max-width: о них написано выше.
У шапки ширина все таже — 1000 пикселей. У основного контента (#colLeft) ширина 67%, а у правой колонки — 30%. Отступ между ними 30 пикселей (3%).
Использование media screen
Стоит отметить, что в media screen задается нужное разрешение экрана устройства. Их очень много, можно указывать даже свои, но самые популярные: 320px, 480px, 600px, 768px, 1024px. В моем примере используется два разрешения: 768px и 1024px.
Таким образом выглядит тег media screen в CSS
@media screen and (min-width:200px) and (max-width:1024px)
Как можно увидеть, мы используем максимальную ширину — 1024px. Данное свойство будет предаваться только тогда, когда ширина окна будет меньше 1024 пикселей.
1024 пикселя
Допустим, что наша цель — чуть-чуть сузить шаблон при этом разрешении, но основной контент и сайтбар должны оставаться на месте.
Вот, что необходимо прописать в CSS
@media screen and (min-width:100px) and (max-width:1024px) < /* размер блока, где находятся главный контент и сайтбар*/ body #wrapper < margin-top:40px; width: 90%; margin: 0 auto; >/* размер шапки сайта*/ body #headerInner < width:90%; margin:0 auto; >/* размер главного контента*/ #wrapper #content #colLeft < width:67%; >/* размер сайтбара*/ #wrapper #content #colRight < margin-left:3%; width:30%; >> /* скобка, закрывающая тег @media screen
Шапка сайта (#headerInner) имеет новый размер в 90%. Стоит отметить, что для шапки мы не используем max-width, ибо он здесь не нужен. #wrapper — блок, в котором находится основной контент и сайтбар, его ширина тоже 90%. Ширина и сайтбара, и основного контента остаются неизменными, изменился лишь отступ у сайтбара (3%). Это используется для того, чтобы при уменьшение окна сайтбар не «падал» вниз.
768px
Теперь мы пишем настройки для окон, ширина которых 768 пикселей и меньше. Сейчас мы будем распологать сайтбар под основным контентом.
@media screen and (min-width:100px) and (max-width:768px) < #wrapper #colLeft < float:none; width:100%; margin-right:0px; >#wrapper #colRight < margin-left:0px; margin-top:25px; float:none; width:100%; >>
Для блока основного контента (#colLeft) мы указали ширину 100%, чтобы блок растянулся на весь экран. Также мы убрали выравнивание по левому краю, указав float: none, чтобы сайтбар (#colRight) «уплыл» под основной блок контента.
Для сайтбара ширина та же, а выравнивание по правому боку (float: right;) мы убрали. Ко всему этому, мы добавили отступ (margin-top: 25px;), чтобы эти два блока разделялись.
Для того, чтобы картинки также сужались нужно использовать этот код
Responsive Web Design — The Viewport
The viewport is the user’s visible area of a web page.
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.
Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.
This was not perfect!! But a quick fix.
Setting The Viewport
HTML5 introduced a method to let web designers take control over the viewport, through the tag.
You should include the following viewport element in all your web pages:
This gives the browser instructions on how to control the page’s dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
Tip: If you are browsing this page with a phone or a tablet, you can click on the two links above to see the difference.
Size Content to The Viewport
Users are used to scroll websites vertically on both desktop and mobile devices — but not horizontally!
So, if the user is forced to scroll horizontally, or zoom out, to see the whole web page it results in a poor user experience.
Some additional rules to follow:
1. Do NOT use large fixed width elements — For example, if an image is displayed at a width wider than the viewport it can cause the viewport to scroll horizontally. Remember to adjust this content to fit within the width of the viewport.
2. Do NOT let the content rely on a particular viewport width to render well — Since screen dimensions and width in CSS pixels vary widely between devices, content should not rely on a particular viewport width to render well.
3. Use CSS media queries to apply different styling for small and large screens — Setting large absolute CSS widths for page elements will cause the element to be too wide for the viewport on a smaller device. Instead, consider using relative width values, such as width: 100%. Also, be careful of using large absolute positioning values. It may cause the element to fall outside the viewport on small devices.
Fit Your UI to the Screen on Mobile Browsers
Fitting your UI to the screen on mobile devices gets weird sometimes. Most mobile browsers have navigation bars or applications menus that hide itself while user is scrolling down throughout the page. This causes the actual height of the window to change. What difference does it make? Let’s say you want your footer to be fixed at the bottom of every page. Without a proper fix, it won’t work. Here is the difference: I know my drawing is bad, but I hope you got the idea. This is even more important when working with modals on mobile: If you can’t fit your modals to the screen, users won’t see some parts of your UI. Maybe they will miss some important buttons. How to fix this? Well, it’s very easy.
1. Add The Viewport Metatag
name="viewport" content="width=device-width, height=device-height, initial-scale=1">
2. Set CSS Variable
const resizeOps = () => document.documentElement.style.setProperty("--vh", window.innerHeight * 0.01 + "px"); >; resizeOps(); window.addEventListener("resize", resizeOps);
This block should run as soon as your app starts. It will set 1% of the actual view height of the window as a CSS variable whenever the window resizes. We’ll use this variable in the next and the last step.
3. Adjust Your CSS
html, body height: 100vh; height: calc(var(--vh, 1vh) * 100); >
First height property is for older browser in case if the browser doesn’t support CSS variables. You can see its support table here. If you don’t want your whole page to behave in this way, you can also do something like this:
.modal width: 50vw; height: 50vh; height: calc(var(--vh, 1vh) * 50); >
In short; for individual UI elements, all you need to do is using calc(var(—vh, 1vh) * 50) instead of 50vh. I hope this was useful, you can also follow me on Twitter for future content: twitter.com/oznbll
I know my drawing is bad, but I hope you got the idea. This is even more important when working with modals on mobile: 
If you can’t fit your modals to the screen, users won’t see some parts of your UI. Maybe they will miss some important buttons. How to fix this? Well, it’s very easy.