CSS медиуми пребарувања: чекор по чекор опис, карактеристики и рецензии

Еднаш, многу одамна, оние кои го посетуваат веб-сајтови со паметни телефони и слични мобилни уреди кои предизвикуваат други само се смееја. Многу едноставно, не може да разбере зошто тоа е неопходно, бидејќи не постои таква удобно десктоп компјутери! Или, во најлош случај, лаптопи. Покрај тоа, на мобилниот интернет, тогаш беше скапо.

помина време. Интернет стана поевтина. Продажба излезе повеќе и повеќе мобилни телефони и таблети. По некое време, сопствениците на популарни сајтови збунет си ја почеша главата. Според статистичките податоци, се чини дека нивните ресурси се со поголема веројатност да ги посетат своите паметни телефони отколку со стационарни компјутер!

Во тоа време на сајтови не се оптимизирани за гледање на мобилни уреди. Одење на стариот начин на живот на вашиот телефон, вие ќе треба да бидат задоволни со мали букви, мали ставки од менито и копчињата непријатно.

Доаѓањето на CSS медиуми пребарувања

Имаше потреба да се наметне ресурси, така што тие изгледаат добро кога се гледа од секој екран. Прво се шири на практиката на создавање посебни локации за секоја големина. На пример, посетителите кои користат мобилен телефон, можете да добиете на еден ресурс, и еден кој е "седи" со вашиот компјутер - од друга страна. Но, тоа беше долго, скапо и незгодно.

Потоа дојде CSS3 медиуми пребарувања. Со нив дојде само можност за спроведување на динамичен дизајн.

Што е динамичен дизајн?

Овој термин се користи ако појавата на ресурси се менува во зависност од големината на екранот на кои се разгледуваат. Како да се разбере ова? Тоа е едноставно.

Замислете дека имате веб-сајт. Во нејзиниот горен дел има навигација мени. Хоризонтално. Таа се протега во текот на целата ширина на страницата. Под тоа е блок со информации за контакт. Телефон и адреса, исто така, распоредени од страна на две блокови и се наредени хоризонтално во непосредна близина на едни со други. Според овој блок - главна содржина, а од левата или десната страна се наоѓа лента. Подолу, како и обично, подножјето.

Овој "класичен" распоред дијаграм. Тоа е совршен за персонален компјутер, но не премногу лесен за мобилни телефони. Хоризонтално мени е премногу широк. Контактите се наоѓа далеку едни од други. За да го користите информации од страничната лента и сите ќе мора да дојдете на екранот, и тоа не е за сечиј вкус.

Проблемот може да се реши со помош на адаптивното и мобилни дизајн со CSS3 медиуми пребарувања. Со користење на пребарувања медиумите, реконструкција на локацијата на содржина ... Сега работи вака:

• врвот - единица со вертикална мени за навигација;
• под него - блок со контакти, кои се сега, исто така, поставени вертикално;
• лента содржина не е прикажана на страната <главната> таг содржина, а над него.

Ова е едноставен пример за тоа што може да се направи со Отворени Веб Дизајн медиуми пребарувања. Всушност многу повеќе можности.

Значи она што е прашања на медиумите?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. Под CSS медиуми пребарувања CSS3 разбираат терминот модул, со кој може да се направи на содржината на страницата за да се прилагодат на одредени услови. На пример, тоа почнува да се одговори на големината на екранот, или уред ориентација (портрет / пејзаж).

Како системот разбира дека потребата за промена на содржината? Таа користи прашања медиуми. Тие се определи одредени параметри. Ако уредот од која дошол посетителот на сајтот ги задоволува овие параметри, вклучувајќи стилови пред-рецепт. Тие може да се запише како вкупен CSS маса, или во посебна датотека.

CSS медиуми пребарувања Browser Компатибилност

Safari до Chrome. Сите современи пребарувачи поддржуваат оваа технологија, од Safari на Chrome. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. Се разбира, корисниците на постарите верзии на Internet Explorer имаат проблем ... но, ајде да се соочиме со тоа искрено - оние кои се уште се користи постарите на IE, само за нешто може да предизвика проблеми.

Синтакса адаптивни распоред медиуми пребарувања

html. Можеби сте биле изложени на прашања медиуми кога е поврзан на датотеката со HTML. Запомнете дека линија? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. = "text / css" href = http: // сајт /article/320575/%E2%80%99style.css%E2%80%99%3E Понекогаш на крајот додава уште еден параметар, кој изгледаше како: медиумите = 'на екранот ".

Ова е медиумска пребарување! Тој покажува дека одреден стил датотека ќе работи на уреди опремени со телевизори. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. Наместо тоа, можете да наведете екран печатење - во овој случај, стиловите на датотека се применуваат, ако страната е отпечатена.

Можете да ги користите следниве атрибути:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; сите - универзална верзија, што се користи од страна на тишината, се применува во сите случаи;
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - екрани (компјутери, лаптопи, таблети, паметни телефони, и сето тоа е опремен со екран);
• принтеры; печатење - Принтери;
• – проекторы; проекција - проектор;
• – речевые браузеры; говорот - говор прелистувачи;
• – для устройств для слабовидящих; Брајово писмо - средства за лицата со оштетен вид;
• – для экранов телевизоров. tv - за ТВ екрани.

Тоа не е сè. , но они используются редко. Постојат неколку дополнителни CSS медиуми пребарувања атрибути, но тие ретко се користи. all. Покрај тоа, не се определи параметар - неисполнување на сите.

Структурата на прашања во медиумите

css. Наместо за создавање на датотека стил, можете да го користите CSS код. Тоа изгледа вака:

(тут будут стили } @media екран и (макс ширина: 1024px) {( постојат стилови}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. По @media директива, што го прави јасно дека се користи за пребарување на медиумите, се е индикација за типот на уредот (екран - на екранот) и дополнителни параметри. Max Width. Во овој пример, се користи CSS медиуми пребарувања Макс ширина на имотот. px. Ова значи дека стилови наведени во загради ќе бидат вклучени, ако корисникот на големината на екранот на уредот од 1024 пиксели. и and не обязательны. Екран и и не се обврзувачки. Можете да го напишете ова:

@media (максимум-width: 1024px) {}

Во таков случај, својствата што треба да се користи на било кој уред, а не само оние кои се опремени со телевизори.

Наведување на повеќе параметри

Да претпоставиме дека сакате да го ограничи опсегот на неколку уреди кои ќе се користат да се избере стилот. px, но не больше 500 px. Да речеме дека сакате да се покаже на својствата на само оние кои го посетуваат вашиот сајт од паметен телефон, големината на екранот не е помалку од 320 пиксели, но не повеќе од 500 пиксели. Во таков случај, барањето е во форма:

@media (мин-width: 320px) и (максимум-width: 500px) {}

and. Ако сте запознаени со програмирање, NJ знаат што се применува операторот и. За оние кои не знам: тоа проверки ако двата услови се вистинити. својства Е. Активирање на екранот за пребарување треба да биде не помалку од 320 и не повеќе од 500 пиксели.

and не ограничивается одним. И бројот на оператори не е ограничена само на еден. Можете да ги стави колку што сакате. На пример, обидете се да се создаде одредена големина на екрани за паметни телефони и сосема поинаква - за телевизори.

Важна точка - ориентацијата на уредот корисник. Некој гледа веб-сајтови на вашиот паметен телефон во ориентација на портрет, некој - со пејзажот. orientation:portrait, для вторых, соответственно, orientation:landscape. За поранешна, ќе ви треба дополнителен услов ориентација: портрет, за вториот, односно, ориентација: пејзаж. @media. Овие линии, исто така, се прикажани во загради, а потоа @media тим. and. Можете да ги споделите преку и.

Уште една интересна нијанса. and вы вполне можете использовать оператор or. Наместо тоа, а вие може да го користат или оператор. Тој треба најмалку еден услов во барањето да биде вистина! На пример:

) {} @media (максимум-width: 500px) или (ориентација: Портрет) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. Ако на екранот е помалку од 500 пиксели или употреба ориентација на портрет, протезите ќе се стилови ефект.

нема клучни зборови за фино подесување

not. пребарување на медиумите, ќе можете да внесете збор не. Ова е направено како што следува:

@media (не max-width: 700px ) {}

Својства се активираат ако максималната ширина не е еднаков на 700 пиксели.

медиумите карактеристики

На прашања може да се користи неколку претходно утврдени функции. W3C. Запознајте се со сите што може онлајн W3C. Повеќето кодери доволно да поседуваат три главни:

• (о нем мы уже говорили); ориентација (ние веќе разговаравме за тоа);
• (ширина, ее тоже упоминали); ширина (ширина, што е, исто така, споменати);
• (высота). висина (висина).

Висина ретко се користи, но постојат неколку случаи во кои оваа опција може да биде корисно.

Како и каде да се одржи барања?

Многу веб дизајнери на некој начин ги стави на крајот на датотеката стилови. На пример, првиот наведува главните стилови, а потоа, во долниот дел од документот, поставени барања.

Ова не е многу добра. Многу поудобно да се одржи својства за различни уреди веднаш по главни стилови. На пример, имате div, што ја постави црвена боја на фонт:

div {

боја: црвена;

}

Веднаш по барањето означува:

@media (мин-width: 320px) {}

Пропишува својства.

Таквиот пристап ќе биде тежок, ако се користи "чиста» CSS. Со помош на препроцесори. Тие имаат многу интересни можности за поточни барања апликација.

Друга опција - поставување на својствата за различни уреди во различни фајлови стил. Ова е особено корисно ако користите директива препроцесори за увоз. Резултатот е лесно да се уреди, чист код.

Кои Еден да се користи? Сето тоа зависи од личните преференции и карактеристики на тимот. Можеби, на местото на вашата работа има одреден начин на поставување прашања медиуми ќе бидат прифатени.

Исто така не заборавајте дека можете да се поедностави вашиот живот со најновите софтвер. Тоа не е само за препроцесори. Со Gulp група CSS медиуми пребарувања може да се направи процесот многу полесно. Се препорачува да го совладате оваа алатка или кои било од неговите аналози.