Отзивчиво оформление: какво представлява и как да го използвам

Отзивчивото оформление променя дизайна на страницата въз основа на поведението на потребителя, платформата, размера на екрана и ориентацията на устройството и е неразделна част от съвременната уеб разработка. Тя ви позволява значително да спестите пари и да не рисувате нов дизайн за всяка резолюция, а да промените размера и местоположението на отделните елементи.

Тази статия ще разгледа основните елементи на уебсайта и как да ги адаптирате.

Регулиране на разделителната способност на екрана

По принцип можете да разделите устройствата на различни категории и да напишете за всяка от тях поотделно, но това ще отнеме твърде много време и кой знае какви стандарти ще бъдат след пет години? Освен това, според статистиката, имаме цяла гама от различни резолюции:

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

Частично решение: правене на всичко гъвкаво

Разбира се, това не е идеално, но решава повечето проблеми.

Ethan Marcotte създаде прост шаблон, за да демонстрира използването на гъвкаво оформление:

На пръв поглед може да изглежда, че всичко е лесно, но не е така. Разгледайте логото:

Ако намалите цялото изображение, етикетите ще станат нечетими. Следователно, за да запазите логото, картината е разделена на две части: първата част (илюстрация) се използва като фон, втората (логото) се преоразмерява пропорционално.

Елементът h1 съдържа изображението като фон и изображението е подравнено с фона на контейнера (заглавката).

Гъвкави изображения

Работата с изображения е едно от най-големите предизвикателства при работа с адаптивни дизайни. Има много начини за преоразмеряване на изображенията и повечето от тях са доста лесни за изпълнение. Едно решение е да използвате максимална ширина в CSS:

Img (макс. ширина: 100%;)

Максималната ширина на изображението е 100% от ширината на екрана или прозореца на браузъра, така че колкото по-малка е ширината, толкова по-малка е картината. Имайте предвид, че максималната ширина не се поддържа в IE, така че използвайте ширина: 100%.

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

Друг начин: отзивчиви изображения

Техниката, представена от Filament Group, не само преоразмерява изображенията, но също така компресира разделителната способност на изображенията на малки екрани, за да ускори времето за зареждане.

Тази техника изисква няколко файла, налични в Github. Първо вземаме JavaScript файл ( rwd-images.js), файл .htaccessи rwd.gif(файл с изображение). След това използваме малко HTML, за да свържем големите и малките разделителни способности: първо, малко изображение с префикс с .r(за да посочите, че изображението трябва да реагира), след това свържете към голямото изображение, като използвате data-fulsrc:

За всеки екран, по-широк от 480 px, ще се зареди изображение с по-висока разделителна способност ( largeRes.jpg), а на малки екрани ще се зареди ( smallRes.jpg).

iPhone и iPod Touch имат специална функция: дизайн, създаден за големи екрани, просто се свива в браузър с малка разделителна способност без превъртане или допълнително мобилно оформление. Изображенията и текстът обаче няма да се виждат:

За решаване на този проблем се използва мета тагът:

Ако първоначалният мащаб е равен на единица, ширината на снимките става равна на ширината на екрана.

Персонализирана структура на оформлението на страницата

При значителни промени в размера на страницата може да се наложи промяна на оформлението на елементите като цяло. Удобно е да направите това чрез отделна таблица със стилове или, по-ефективно, чрез CSS медийна заявка. Това не би трябвало да е проблем, тъй като повечето стилове ще останат същите и само няколко ще се променят.

Например, имате основна таблица със стилове, която дефинира #wrapper, #content, #sidebar, #nav заедно с цветове, фонове и шрифтове. Ако основните ви стилове правят оформлението твърде тясно, късо, широко или високо, можете да дефинирате това и да включите нови стилове.

style.css (основен):

/ * Основни стилове, които да бъдат наследени от дъщерната таблица със стилове * / html, тяло (фон ... шрифт ... цвят ...) h1, h2, h3 () p, blockquote, pre, code, ol, ul () / * Структурни елементи * / #wrapper (ширина: 80%; поле: 0 auto; фон: #fff; padding: 20px;) #content (ширина: 54%; float: вляво; margin-right: 3%;) # sidebar-left (ширина: 20%; float: ляво; margin-right: 3%;) # sidebar-right (ширина: 20%; float: ляво;)

mobile.css (дете):

#wrapper (width: 90%;) #content (width: 100%;) # sidebar-left (width: 100%; clear: и двете; / * Допълнителни стилове за новия дизайн * / border-top: 1px solid #ccc ; margin-top: 20px;) # sidebar-right (ширина: 100%; clear: и двете; / * Допълнителен стил за нашето ново оформление * / border-top: 1px solid #ccc; margin-top: 20px;)

На широк екран левият и десният странични панели пасват добре отстрани. При по-тесни екрани тези блокове са разположени един под друг за по-голямо удобство.

CSS3 медийни заявки

Нека да разгледаме как можете да използвате CSS3 медийни заявки за създаване на адаптивни дизайни. min-width определя минималната ширина на прозореца или екрана на браузъра, към който ще бъдат приложени определени стилове. Ако някоя стойност е под мин. ширина, тогава стиловете ще бъдат игнорирани. max-width прави обратното.

@медиен екран и (мин. ширина: 600px) (.hereIsMyClass (ширина: 30%; float: вдясно;))

Медийната заявка ще работи само когато мин. ширина е по-голяма или равна на 600 px.

@media screen и (макс. ширина: 600px) (.aClassforSmallScreens (изчистен: и двете; размер на шрифта: 1,3em;))

В този случай класът ( aClassforSmallscreens) ще работи, когато ширината на екрана е по-малка или равна на 600 пиксела.

Докато min-width и max-width могат да се прилагат както за ширината на екрана, така и за ширината на прозореца на браузъра, може да се наложи да работим само с ширината на устройството. Например, за да игнорирате браузърите, отворете в малък прозорец. Можете да използвате min-device-width и max-device-width за това:

@media screen и (max-device-width: 480px) (.classForiPhoneDisplay (font-size: 1.2em;)) @media screen и (min-device-width: 768px) (.minimumiPadWidth (clear: и двете; margin-bottom : 2px плътно #ccc;))

Специално за iPad, медийните заявки имат свойството ориентация, чиито стойности могат да бъдат от двете пейзаж(хоризонтално) или портрет(вертикално):

@медиен екран и (ориентация: пейзаж) (.iPadLandscape (ширина: 30%; плаващ: вдясно;)) @медиен екран и (ориентация: портрет) (.iPadPortrait (изчистен: и двете;))

Също така, стойностите на медийните заявки могат да бъдат комбинирани:

@media screen и (мин. ширина: 800 пиксела) и (макс. ширина: 1200 пиксела) (.classForaMediumScreen (фон: # cc0000; ширина: 30%; float: вдясно;))

Този код ще работи само за екрани или прозорци на браузър с ширина от 800 до 1200 пиксела.

Можете да заредите конкретен лист със стилове за различни стойности на медийни заявки, както следва:

JavaScript

Ако вашият браузър не поддържа CSS3 медийни заявки, тогава подмяната на стил може да се извърши с помощта на jQuery:

Допълнителен дисплей на съдържанието

Възможността за свиване и размяна на елементи, за да се поберат на малки екрани, е страхотна. Но това не е най-добрият вариант. За мобилни устройства обикновено има по-широк набор от промени: по-лесна навигация, по-фокусирано съдържание, списъци или редове вместо колони.

За щастие, CSS ни дава възможността да показваме и скриваме съдържание с невероятна лекота.

Дисплей: няма;

display: none се използва за скрити обекти.

Ето нашата маркировка:

Съдържание на лявата странична лента | Съдържание на дясната странична лента

style.css (основен):

#content (ширина: 54%; float: ляво; margin-right: 3%;) # sidebar-left (ширина: 20%; float: ляво; margin-right: 3%;) # sidebar-right (ширина: 20 %; float: вляво;) .sidebar-nav (дисплей: няма;)

mobile.css (опростен):

#content (ширина: 100%;) # sidebar-left (display: none;) # sidebar-right (display: none;). sidebar-nav (display: inline;)

Ако размерът на екрана е намален, можете например да използвате скрипт или файл с алтернативен стил, за да увеличите бялото пространство или да замените навигацията за по-голямо удобство. По този начин, като имате възможността да скривате и показвате елементи, да преоразмерявате снимки, елементи и много други, можете да адаптирате дизайна към всяко устройство и екран.

Поздрави на всички читатели на блога на HeavenWeb. Днес в блога ще дам пример за т. нар. отзивчиво оформление, а също така, като пример, ще покажа как да се направи просто оформление, като се вземе предвид адаптивността за различни резолюции на екрана.

По-просто казано, адаптивно или "отзивчиво" оформление се разбира като такова подреждане на блокове и елементи, което се настройва към размера и разделителната способност на екрана на устройството, с което се отваря страницата.

С нарастващата популярност на таблетните компютри и смартфони, уеб администраторите трябва да поддържат нови формати за показване на сайтове и съответно нови резолюции на екрана, в които тези сайтове се отварят.

Най-критичната стойност е ширината на прозореца на браузъра. Минимумът на най-бюджетните смартфони е 240-360px, но в повечето случаи все още е 480px и повече. И това е повече от половината от размера на стандартен 1024-пикселов монитор.

Друг важен момент са големите монитори с висока резолюция, което също не бива да се забравя. Целта на уеб администратора е да накара сайта да се приспособи към резолюцията и да избегне хоризонтално превъртане на всеки екран.

Това може да се постигне за сметка на CSS медийни заявки, както и свойства на стил, които ограничават минималната и максималната ширина и височина в рамките на посочените граници.

Но всичко е по-добре показано с пример. Нека направим просто отзивчиво оформление с минимум елементи, външният вид на готовия пример може да се види на демонстрационната страница:

И така, нашите изисквания за неговата адаптивност са както следва:

• Ширината на основната част трябва да се разтяга при висока разделителна способност, но до определена стойност, тъй като твърде дългите редове не са удобни за четене.
• Тъй като ширината на браузъра се свива, изображенията трябва да се свиват пропорционално, за да останат в границите на областта.
• С ширина под 700 пиксела (минимум - таблет или смартфон с HD екран в портретна ориентация), трите блока в долната част трябва да се подредят един след друг и да заемат 100% от ширината на основния блок.
• Също така, в същото време, лявата странична лента трябва да бъде сгъната в тясна лента, което прави място за основната част.
• Осигурете бутон, докосване на който отваря и затваря страничната лента, която сега трябва да бъде позиционирана над основния блок, под формата на изскачащо меню.

Да започваме. Създадох файл index.html и папки css и изображения, където поставих файла със стилове и изображенията, изрязани от оформлението, съответно.

В HTML файла нека създадем два основни контейнера, left_side и .wrapper, съответно за лявото меню и основното тяло. B. left_side постави малко маркировка за логото, социални връзки и списък с менюта с водещи символи.

В десния основен блок ще обвием всяка публикация с div с class.text_block, ще добавим текст за място от инструмента за резюмета на Yandex и изображения например.

Добавете три блока .footer_block към дъното, увийте ги в общ.footer. Нека добавим заглавия H2, H3 към статиите и в резултат получаваме маркировка по следния начин:

Обърнете внимание на ред 6. Факт е, че мобилните устройства мащабират уеб страниците за лесно гледане, но това не ни е необходимо. С този мета запис забраняваме мащабирането на страниците.

Сега нека преминем към CSS стиловете. Нека подредим левия блок:

Лява_страна (фон: # 1d282b; ширина: 300px; позиция: фиксирана; ляво: 0; горна страна: 0; височина: 100%; z-индекс: 5;) .logo_text (допълване: 20px 10px; цвят: #ffffff; шрифт- размер: 24px; височина на реда: 30px; font-weight: нормален; font-family: myPTNarrow; text-align: center;) .logo_text a (дисплей: inline-block;) .logo_text span (цвят: # 72898f; шрифт -size: 18px; line-height: 24px; padding: 0 10px 18px; text-align: center; display: block;) .left_menu (margin-top: 30px;) .left_menu ul (display: block; list-style- type: none;) .left_menu li (дисплей: блок; височина: 30px; line-height: 30px;) .left_menu li a (дисплей: блок; линия-височина: 30px; размер на шрифта: 18px; семейство шрифтове: myPTNarrow ; цвят: #ffffff; text-decoration: няма; padding-left: 60px;) .left_menu li a: задържане на курсора (фон: # 343e41;) .social_img (text-align: center;) .social_img a (дисплей: inline- блок; поле: 0 10px; ширина: 30px; височина: 30px; преливане: скрит;) .social_img a: задържане на курсора (непрозрачност: 0.7;) .tw_i против (фон: url ("../ images / social.png") горе вляво без повторение; ) .go_icon (фон: url ("../ images / social.png") горе вдясно без повторение;) .left_swap (дисплей: няма; / * По подразбиране блокът не се вижда, показва се, ако има медия заявката се задейства * / позиция : фиксирана; ширина: 50px; вляво: 0; отгоре: 0; височина: 100%; z-индекс: 6; фон: url (../ images / swipe.png) # 1d282b център 20px не -повторете ;)

Тук имаме позиция: фиксирана за контейнера .left_side. Това свойство ще позволи на полето винаги да остане отляво (благодарение на ляво: 0; отгоре: 0; и височина: 100%;) и да не превърта с основното съдържание. За да сте сигурни, че блокът не се припокрива с нищо, добавете z-index: 5.

Тъй като ширината на лявото поле е 300 пиксела, централната кутия (.wrapper) трябва да има вътрешна подложка от левия ръб - padding-left: 300px, за да не "попадне" под лявото меню.

Общ код на централното устройство:

Обвивка (позиция: относителна; фон: #ffffff; мин. височина: 200%; мин. ширина: 400px; максимална ширина: 1200px; padding-left: 300px; padding-right: 0px; box-shadow: 0 0 10px rgba (0,0,0,0.2);) .wrapper a (цвят: # 576a6f;) .wrapper a: задържане на курсора (цвят: # 1d282b;) .text_block (overflow: hidden; цвят: # 4a4a4a; размер на шрифта: 18px ; line-height: 24px; min-height: 200px; background: url ("../ images / hr.png") вляво отдолу repeat-x; padding: 10px 40px 10px;) p (margin-bottom: 24px;) .cent_img (дисплей: блок; поле: 0 auto 40px;) .auto_img (дисплей: блок; максимална ширина: 100%; поле: 0 автоматично 24px;)

Най-важното тук е декорацията на ширината на този блок. За .wrapper ще посочим свойства

Минимална ширина: 480px; максимална ширина: 1200px;

Тоест, когато екранът се увеличи по ширина, блокът ще се разшири заедно със съдържанието до 1200 пиксела, след което ще остане от лявата страна, а отдясно ще има само фон. При намаляването му ще се свие до 400px, ако е по-силно ще се появи хоризонтално превъртане.

Изображенията в централния блок трябва да са от класа .auto_img. Ако не пасват по ширина, те ще се свият пропорционално и ще бъдат равни на 100% от ширината на контейнера.

След това нека се заемем със CSS медийните заявки. Всички подобни искания са както следва. Първо идва заглавката @media, след което се посочва типът на устройството, на което искате да приложите css кода на тази заявка. За нормален цветен екран това е думата екран (или по-често пишат всички, тоест за всички устройства). След това условията и параметрите са посочени в скоби.

Сега се интересуваме от условието max-device-width, което показва, че следните правила ще се прилагат само за режима, когато максималната ширина на браузъра е по-малка от определена стойност, посочена след двоеточие.

Тоест едно от нашите условия ще изглежда така:

@media screen и (max-width: 800px) (.left_side (display: none;) .left_swap (display: block;) .wrapper (padding-left: 50px;))

В къдрави скоби вече сме записали необходимите CSS правила, а именно, скриваме лявото меню и показваме скрития преди това спомагателен тесен ляв блок - .left_swap.

Нека добавим още едно условие за прехвърляне на долните хоризонтални блокове във вертикалния ред.

@медиен екран и (макс. ширина: 720 пиксела) (.footer_block (дисплей: блок; ширина: 96%;))

Тези. елементите престават да бъдат вградени и стават блокови, поради което се подреждат един след друг. Със свойството ширина: 96% увеличаваме ширината им до максимум (не до 100%, тъй като запазваме paddings - вътрешни полета).

Тук започнах от факта, че разделителната способност на таблетите и смартфоните HD обикновено е 800 пиксела в портретна ориентация, така че за всичко по-долу блокът на менюто е скрит.

Всъщност CSS медийните заявки могат да бъдат сложни чрез добавяне на множество условия наведнъж с помощта на операторите и. Можете да дефинирате не само ширината на екрана, но и височината, ориентацията, броя на поддържаните цветове и други параметри.

И накрая, нека използваме jQuery, за да отворим лявото меню, като щракнем върху свития тесен ляв блок - върху .left_swap. Например така:

JQuery (функция ($) ($ (. Left_swap"). Щракнете върху (функция () ($ (". Left_side"). Превключване (); върне false;));))

Всичко тук е изключително просто, обработваме щракването върху блока и показваме или скриваме блока с менюто. Кодът може да е твърде прост и може да бъде подобрен, но ще служи като пример.

По този начин разгледахме пример за оформление за адаптивен сайт и полученият резултат може да се види както обикновено на демонстрационната страница. Опитайте да увеличите или намалите ширината на прозореца на браузъра и наблюдавайте поведението на блоковете, докато правите това.

PS: Напоследък в блога има много спам в коментарите, не винаги имам време да го изчистя, но все пак чета всичките ви коментари по случая и ще се опитам да отговоря.

От автора:в бъдеще се очаква мобилният трафик да расте стабилно в света на интернет. Това означава, че сега трябва да можете да набирате, така че вашият проект да изглежда добре на всички устройства. Решението отдавна е намерено - адаптивно оформление на сайта! Ще говорим за това.

2 начина да угодите на мобилните потребители

Най-лесният начин да определите как е разположен даден сайт е да намалите размера на прозореца. Ако се появи хоризонтална лента за превъртане, това е фиксирано оформление. Всички размери са зададени, най-вероятно в пиксели. Ще бъде ли удобно потребителите да използват такъв сайт на мобилни устройства? Не.

По същество има две решения на този проблем. Първият е да създадете различни версии на оформлението (за компютри, за таблети и за мобилни телефони). Точно това се прави например в социалната мрежа Vkontakte. Вторият вариант е да направите адаптивно оформление. Такъв сайт ще реагира на промени в ширината на прозореца. Тази опция днес се използва все по-често.

Ориз. 1. Както можете да видите, дори и на мобилен телефон, webformyself се показва добре.

Адаптивността е началото на пътя

Отзивчивото оформление не се различава от обичайното, с изключение на това, че към таблицата със стилове се добавят медийни заявки, където стиловете се записват за различни ширини на екрана. Понякога те се изваждат в отделен css файл, а понякога се записват в края на основния лист със стилове. Пример за медийна заявка:

@media само екран и (макс. ширина: 980px) ()

@ екран само за медия и (макс. ширина: 980 пиксела) ()

Нека разгледаме по-отблизо тази публикация.

@media - действителното обозначение на медийна заявка

Екран - указваме, че това се отнася до екрана (тук можете да посочите и телевизор или проектор). Само - означава, че правилата ще се прилагат само към екрана.

И (и) - добавяне на условие, за което ще работи медийната заявка. Условието се добавя в скоби.

Max-width: 980px - самото условие. С прости думи, това означава, че медийната заявка ще работи, когато ширината на екрана е най-много 980 пиксела (тоест от 0 до 980 пиксела). Ако ширината е по-голяма от 980, правилата няма да работят. Най-често като условие се използват max-width, min-width, max-device-width, min-device-width. Последните две означават, че правилата ще работят само на самите мобилни устройства (тоест, когато ширината на прозореца се промени на компютър, ще се появи хоризонтално превъртане). Можете също да посочите максимална височина, но това рядко се използва.

() - всички css правила са написани в тези къдрави скоби. Може да има толкова много от тях, колкото искате. Ще дам няколко примера наведнъж, за да разберете:

@media само екран и (макс. ширина: 980px) (.селектор (фон: черен)) @media само екран и (мин. ширина: 600px) (img (float: вляво))

@ екран само за медия и (макс. ширина: 980 пиксела) ( Селектор (фон: черен) @ екран само за медия и (мин. ширина: 600 пиксела) ( img (float: вляво)

Преведено на човешки език: ако ширината на прозореца е по-малка от 980 пиксела, тогава правилото (фон: черен) ще бъде приложено към елемента с класа на селектора. Още по-просто казано, фонът на този елемент ще стане черен.

Втори пример: ако ширината на прозореца е повече от 600 пиксела, тогава всички изображения ще бъдат подравнени към левия ръб.

Имате ли вече идеята за гениалността на този метод за оформление? Всъщност, като използвате правила за медии, можете да коригирате съществуващи или да добавите нови css правила. По този начин можете да приложите напълно адаптивен шаблон.

Ориз. 2. Пример за медийна заявка, която определя правилата за широкоекранни монитори.

Научете повече за отзивчивостта

Това е разбираемо, но как сами да направите адаптивно оформление на уебсайт? За да направите това, очевидно не е достатъчно да регистрирате тези два примера. Надявам се, че ще разберете идеята за тях, но от тях няма голяма полза. Нуждаем се от реална полза. И можете да го получите от. Но това е, ако се отнасяте сериозно към адаптивността. Факт е, че тъй като курсът е платен, след като го изучавате, вие сами ще можете да научите другите за адаптивно оформление.

Ако имате нужда от нещо по-просто, само за да го разберете, тогава това ще ви подхожда много по-добре. Състои се от пет видео урока, които ще ви преведат през основите. Курсът е много лесен, информацията е специално подбрана за начинаещи. Междувременно ще можете да разгледате няколко практически примера, така че след като го научите, сами да адаптирате просто оформление.

Трудно ли е да овладеете отзивчивото оформление?

Когато тепърва започвах да уча уеб технологии, дори не знаех какво е адаптивно оформление на уебсайт. Не беше възможно да направите това сами. Страхът е нашият основен враг. Оказа се, че всичко е доста просто. И сега, когато от време на време преглеждам кода на отзивчивите шаблони, осъзнавам колко лесно е да се приложи отзивчивост на моменти.

Как да тествате отзивчивостта

Най-лесният начин да направите това е в браузър. Например в Google Chrome, когато натисна F12, се появява програма за отстраняване на грешки. Опитайте сега да преоразмерите прозореца. В горния десен ъгъл ще видите стойността за неговата ширина. Това е много удобно за бърза проверка на вашето оформление. Мога също да препоръчам responsivetest.net. Услугата е доста удобна и перфектно проверява адаптивността.

Ориз. 3. Когато задържите F12, се появява инструментът за отстраняване на грешки. Сега в горния десен ъгъл можете да видите текущата ширина на прозореца при промяна.

Защо отзивчиво оформление?

В началото на статията казах, че има друг начин да угодите на мобилните потребители - да разработите отделни версии за различни устройства. Кой начин според вас е по-лесен? Много по-лесно е да приложите отзивчивост. Това са само няколкостотин допълнителни реда код, а не отделна версия на сайта, която често е много различна по дизайн. Както показва практиката, мобилните версии за техните сайтове се правят само от големи компании, които могат да си позволят да харчат повече пари за разработване на проекти.

За всички останали, отзивчивото оформление е това, към което трябва да се стремите в момента. И тъй като мобилният трафик само ще расте, започнете да го прилагате сега. И в същото време се абонирайте за нашия блог, за да подобрите знанията си за изграждането на сайтове.

JavaScript е блокиран във вашия браузър. Моля, активирайте JavaScript, за да работи сайтът!

В момента посетителите имат достъп до сайтове не само от настолен компютър, но и от лаптоп, таблет или смартфон. В същото време на устройства с малък екран текстът често е твърде малък, връзките практически не могат да се щракват и контролите са твърде близо един до друг.

За да премахнат тези недостатъци, те започнаха да разработват отделни мобилни версии на сайтове. Но е дълъг, скъп и неудобен за поддръжка.

Решението на проблема - Адаптивно оформлениев който CSS стиловете се променят динамично за различни ширини на прозореца на браузъра.

Пример

Пример за адаптивно оформление е сайтът domportretov.ru, където страницата се адаптира към няколко интервала от ширината на прозореца на браузъра, като същевременно поддържа максимален комфорт за посетителя:

Разработването на адаптивно оформление най-често се извършва от съществуващ сайт за голям екран към по-малки екрани. Можете да проверите резултата от работата по различни начини:

1. просто преоразмерете екрана на браузъра,
2. позиционирайте панела за инспектор на компонентите вдясно и променете ширината му,
3. използвайте отзивчив дизайн на браузъра, като щракнете Ctrl + Shift + Mвъв Firefox или Google Chrome.

Какво се използва за оптимизиране на уебсайт за мобилни устройства?

Мета маркер на Viewport

По подразбиране мобилните браузъри приемат страница на сайта като страница на обикновен компютър и я мащабират, за да пасне на ширината на екрана на телефона. В резултат на това текстът става малък и посетителят трябва да увеличи страницата, за да го прочете.

За да преоразмерите и мащабирате страницата, за да пасне на ширината на екрана, устройствата използват мета таг на viewportкоято съдържа инструкции за браузъра.

За да каже на браузъра, че страницата реагира на всяко устройство, мета маркерът на viewport се добавя към заглавката на документа.

Пример

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

ширина	Ширината на видимата област. Препоръчителна стойност: ширина на устройството.
височина	Височина на видимата област. Препоръчителна стойност: височина на устройството.
начален мащаб	Оригиналният мащаб на страницата. Приема стойност от 1 до 5. Препоръчителна стойност: 1.
минимален мащаб	Минималният мащаб на страницата. Приема стойност, която трябва да бъде по-малка или равна на първоначалната скала. Стойност 1 предотвратява намаляването на страницата.
максимален мащаб	Максималният мащаб на страницата. Приема стойност, която трябва да бъде по-голяма или равна на първоначалната скала. Стойност 1 забранява увеличаването на страницата.
потребителски мащабируем	Активира или деактивира възможността за мащабиране на страницата. Вярно или невярно.

Съдържанието, което е по-широко от екрана, е често срещан проблем, след като изгледът е зададен.

Това се случва, ако някои елементи са настроени на голяма фиксирана ширина.

За да се предотврати появата на хоризонтално превъртане, ширината на страницата е настроена на цял екран, ако е необходимо, ограничена от свойството max-width.

Пример

.content (ширина: 100%; максимална ширина: 1200px;)

Медийни запитвания. CSS стандартни медийни заявки

Възможността за прилагане на различен дизайн в зависимост от ширината на прозореца дава CSS стандартни медийни заявки.

Заявката за медии започва с правилото @mediaпоследвано от условие за прилагане на стилове, състоящо се от типа носител (в примера по-горе всичко), логически оператор ( и) и медийни функции ( максимална ширина: 360px).

Типове медии

всичко	Всички видове.
печат	Принтери и други печатащи устройства.
екран	Екран на монитора.
реч	Речеви синтезатори и програми за възпроизвеждане на текст на глас. Например браузъри за реч.
Отхвърлени, макар и правилни типове, които не работят
брайлово писмо	Брайлови устройства, които са предназначени за четене от незрящи хора.
релефни	Брайлови принтери.
ръчен	Ръчни устройства, смартфони, устройства с малка ширина на екрана.
проекция	Проектори.
tty	Устройства с фиксиран размер на знаците (телепринтери, терминали, устройства с ограничения на дисплея).
тв	телевизори.

Логически оператори

Основни медийни функции

Пример

Размерът на заглавката е зададен:

H1 (размер на шрифта: 72px;)

На голям компютърен екран такова заглавие изглежда добре, но е твърде голямо за вертикален екран на смартфон. За екрани, които са по-малки или равни на 360px широки, можете да намалите размера на шрифта с помощта на медийна заявка:

@media all и (max-width: 360px) (h1 (font-size: 42px;))

Нови мерни единици (vw, vh, rem)

vw	1% от ширината на прозореца на браузъра (прозорец).
vh	1% от височината на прозореца на браузъра (прозорец).

Благодарение на тези единици вече е лесно да се определи относителната височина на елемент в CSS.

Пример

тяло (мин. височина: 100vh;)

Удобно е да зададете размера на шрифта в адаптивно оформление в rem (root em). Тази единица се изчислява въз основа на размера на шрифта на основния елемент ... По подразбиране 1rem = 16px. За по-лесно изчисление размерът на шрифта на основния елемент може да бъде настроен на 10px.

Пример

html (размер на шрифта: 10px;) body (размер на шрифта: 1.6rem;) h1 (размер на шрифта: 7.2rem;) @media all и (макс. ширина: 360px) (размер на шрифта: 1.4rem; ) h1 (размер на шрифта: 4.2rem;))

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

Спецификацията Flexbox ви позволява да контролирате размера, реда и подравняването на елементите хоризонтално и вертикално, както и разпределението на свободното пространство между тях. В този случай блоковете могат да се компресират и разтягат според определените правила, заемайки необходимото пространство.

Flexbox дефинира CSS свойства за flex контейнера и неговите деца (в примера, ul.flex и li.flex, съответно).

Пример

ul.flex (дисплей: flex; / * flex контейнер * / flex-wrap: wrap; / * многоредов режим * / justify-content: интервал-между; / * елементите са разположени равномерно (първо в началото на реда, последно в края) * /) li.flex (дисплей: inline-block; flex-basis: 260px; / * основна ширина на елемента * / flex-grow: 1; / * всички елементи с еднаква ширина * / max-width: 300px; допълване: 8px;)

В резултат на това елементите от списъка се разтягат до пълната налична ширина (ограничена до 300px):

На тесен екран списъкът става вертикален:

С помощта на Flexbox можете да промените реда на елементите и лесно да зададете вертикално подравняване.