И когато забравим за всичко това, което искам ума си да се предприемат пътувания. Пътуването в миналото. Назад към детството. В първия си ден в училище.
Много време беше по-лесно, когато само си загриженост е да се направи фигури и се опитайте да пазят себе си в ръцете си.
Обърнете внимание на тези точки. Вижте какво някои от тях са събрани в групи, а някои от тях са нокаутиран? Искам да ги счупи в пет групи, колкото си мислиш логично.
Кураж. Уверете се, че никой не гледа, и кръг около всяка от петте групи на кръг с пръст, точно както когато едно дете.
Най-вероятно имате нещо подобно на това, нали? (Не ми казвай, че proskrollili надолу, без да прави това упражнение. Аз съм много разстроен.)
Разбира се, тези две понятия на правото могат да се режат около различен начин. Ако ги комбинирате в една група, мисля, че е нормално. Тя се казва, че няма грешен отговор, но аз винаги съм прав, така че не е нужно да слушате този вулгарен утеха.
Преди да продължа, че няма да са изготвили нещо подобно?
Но това е всъщност, което правите, когато сте задали точки на прекъсване в позициите, съответстващи на точната ширина на конкретните устройства (320, 768px, 1024).
Някога чували ли сте ли озадачи роптае по този начин? Или може би това е, което сте били?
"Централна контролна точка - това е до 768px инклузив или не? Така че, аз виждам ... и това Ipad в портретен режим, или това е "голям"? Да, страхотно - това е от 768px или по-висока. Една малка - е 320? И така, какво е интервала от 0 до 319px? Референтната точка за мравките? "
Мога да го оставите в това и преминете директно към правилните контролни точки. Но аз съм любопитен защо по-горе метод ( "тъпа група") е толкова често.
Защо се случи това?
Мисля, че отговорът на тази загадка, както и в много други, е намалена да се скитат из объркващата терминология. В крайна сметка, и да предложи едно питие на царска вода от чаша Есмархов може да изглежда много съблазнително, ако не знаете какво е (о, защо, защо подобна, но по-фина игра на думи на английски език - не ми шега ли е?).
Мисля, че в дискусиите и реализации на контролни точки ние объркват "границите" и "групи".
Кажи ми, ако го направите контролни точки в Sass, Вие декларирате променлива със стойност от $ голям, да речем, 768px?
Това е най-ниската граница на диапазона, което ти се обадя по-голям ( «голям») или на върха? Ако по-ниска, променливата $ малките не трябва да бъде, защото той трябва да е 0. нали?
И ако това е горната граница, а след това как да се определи точката на прекъсване $ голям и нагоре ( «bolshgo от горе")? Трябва да се mediavyrazhenie с мин ширина. равно на $ среда. така?
И ако ти се обадя, така че само самата граница, ние чакаме за объркването в бъдеще, защото mediavyrazhenie - тя винаги е набор.
Оказва се, бъркотията и дори мисля за него - напразно си губите времето. Така че имам три съвети:
- Изберете правилните контролни точки
- Call варира със смисъл
- Напиши декларативно код
Съвет номер 1: Изберете контролните точки правилно
Каква е правилната отправна точка?
Вашият ЦДГ "I" вече привлече кръгове. Току-що сте един от правоъгълника направи.
600px, 900px, 1200px и 1800px, ако ще да направя нещо специално за гигантски екрани. Във всеки случай, ако поръчате по интернет "гигантски екран" става ясно, че това за компютъра. Ако изпратите стар брониран автомобил. тъй като може да бъде малко прекалено много, за да се вземат за доставка.
Point, който току-що е играл на детето си "Аз" представлява най-популярните 14 размери на екрана:
Така че ние можем да постигнем доста малко картина, така че лесно можете да намерите общ език за всеки, който се изгражда бизнесмени, дизайнери, разработчици и тестери, съответно.
Не трябваше да вдигна оранжеви и зелени цветове, но не променя сега всички снимки
Съвет номер 2. Call варира със смисъл
Разбира се, никой не си прави труда да се обадя контролните точки "Papa Bear" и "Малко мече". Но ако аз ще седна с проектанта и обсъдете как би трябвало да изглежда на различни устройства, искам възможно най-бързо с тези заоблени. Ако трябва да се извика с размерите на таблета в портретна позиция - да ми го побира. Светият дим, така го наричат дори «Ipad в портретна позиция:" Аз не съм обиден.
Но срокът на годност на CSS в сайта си - за около три години (ако това не е в Gmail). Ipad с нас за два пъти по-дълго, и от трона го все още не се е отървал. И ние знаем, че Apple не прави нови продукти, но само премахва нещо (бутони, дупки и т.н.) от съществуващия.
Така че 1024 от 768 - това е дълъг период от време, момчета. Няма нужда да се скрие главите в пясъка (интересен факт: совите не са открити в градовете, защото няма пясък, което означава, че няма къде да се скрие от хищници).
Заключение: не съществува разбиране, без диалог. Няма нужда да се откажат от умишлено полезни думи.
Съвет номер 3. Писане на декларативно код
Знам, отново, думата "декларативно". Казано по друг начин: вашия CSS трябва да се определи, че това трябва да се направи, а не как трябва да стане това. Това "как да" добре се скрий в специална myxine.
Както вече видяхме доста голямо количество от объркване с контролните точки се крие във факта, че променливите, показващи този диапазон се наричат по същия начин, както той да варира. До $ голям: 600px просто няма смисъл, ако голям ( «голям») - този диапазон. Това е все едно да кажеш Var координира = 4; ,
Така че всички технически подробности, можете да скриете в техни подобни, вместо да им да използвате кода на открито. И това е възможно, и дори по-добре - да се направи без променливи.
Следващият пример, аз първоначално направих като опростен. Но в действителност, по мое мнение, тя обхваща всичко, което е необходимо. Можете да го погледнете в действие на Codepen. Аз използвам Sass, защото аз не мисля, че на сайта без него. Но логиката на CSS или по-малко ще бъде същото.
Може би аз съм предубеден, но като, доста хубаво декларативно CSS
Моля, имайте предвид, че аз принуди възложителя да уточни наставка -до ( "по-горе") или -само ( «само»).
Неяснота поражда объркване
Можете незабавно да се намери виновен, че не работи с произволна mediavyrazheniyami. Е, добрата новина. Ако имате нужда от произволно mediavyrazhenie, напиши го (на практика, ако имам нужда от нещо по-сложно, например по-горе, аз няма да се направи на глупак главата и веднага се хвърля в ръцете на любимата му Сузи с инструменти й).
Друг недостатък е фактът, че аз имам осем техни подобни. Разбира се, че би било разумно да се направи един единствен техни подобни, а след това просто да го мине с правилния размер, като този:
Да, тя работи. Но ако се премине на името на който не се поддържа съставител ви няма грешка ще покаже. Пропуск дързък-променлива - тогава да предостави кодовите 8 променливи и само, за да им се даде, за да преминете към техни подобни.
Да не говорим за факта, че @include за десктоп-нагоре синтаксис от всички страни с красива от @include за размер (десктоп-нагоре).
И двата примера с код да критикуват за това, че пиша два пъти 900px, освен това 899px. Разбира се, можете да направите една променлива и се изважда 1, когато това е необходимо.
Искаш ли го - знамето в ръцете си, но аз не желая, и ето защо:
- Това не е нещо, което се променя често. Това не са числа, които се използват по време на кода. От това, че те не са променливи, няма проблем - освен ако не искате да се даде на контролните точки се вмъкват Sass скрипт достъп в страницата JS-обект с тези променливи.
- Синтаксисът за превод на номера в реда на Sass ужасно. По-долу - цената, която плащате за вярата, че повторението на броя два пъти - най-лошото от злини:
Е, аз по-лесно четене? Или обратното?
Ами, тъй като аз съм в последния параграф е предприела такава агресивна тон ... Горко на глупака, който прави някои пунктове за съхранение тип Mojo в Sass списък и показва mediavyrazheniya, заобикаляйки своя цикъл, или нещо друго, също толкова абсурдно, че другият разработчиците тогава възраст не се разчете.
Когато сложността, има и бъгове
На последно място, може да се мисли, "Не е ли правилно да ликвидирам на контролните точки по отношение на съдържанието, а не на устройството?". Е, това е готино, че сте прочели този момент вече, и отговорът е "да" ... за сайтове с оформление гледка. Или ако имате няколко оформления, и вие сте щастливи да правят свой собствен набор от контролни точки за всеки. О, и дори ако дизайна на сайта си, не се променя често, или сте доволни да се актуализират контролно-пропускателни пунктове всеки път, когато се актуализира дизайна, защото искате да продължи да зависи от съдържанието, нали?
Комплексни обекти живеят много по-лесно, ако използвате един и същ набор от контролни точки в целия сайт.
Всичко! Но този пост не е някак си достатъчно ясно, таванско помещение, нека да видим дали е имало причина, че трябва да се добави малко ...
Допълнителен съвет за контрол на развитието на точки
Да, дори и в Flickr има контролни точки на 768 и 1400
- Ако искате да видите в отправна точка за действие CSS за екрани с резолюция по-голяма от тази на монитора, след което можете да седне, да се използва "отзивчиви" режим в дебъгер Chrome и въведете произволно гигантски размери.
- Синята лента показва mediavyrazheniya към "максимална ширина", оранжево - за "минути ширина" и зелен - mediavyrazheniya в който има и двете.
- Кликвайки върху този екран комплекти mediavyrazheniyu ширина. Ако кликнете върху няколко пъти зеления mediavyrazheniyu, тя превключва между максимална и минимална ширина.
- След това щракнете с десния бутон върху mediavyrazheniyu в mediavyrazheny панел, за да отидете на определението на правило в CSS.
Послепис Може също така да се интересуват от:
По-малко от шест месеца след датата на последния промяната в W3C работен процес, тъй като ръководството на консорциума са получили предложение да се прилага този нов процес в крайна сметка по случая. И отписване е без значение HTML спецификация на музея, така че те не са объркани разработчиците ", който се представя за" значение.
Друг CSS модул, което ни казаха тихо падежът на статута, с които W3C съветва да започне рутинното използване на нови продукти. съдържа имот ви позволява да ограничите промяната на чертежа на дърво, прекрояване на CSS-кутии и да промените размера им в рамките на елемента. Ето защо е толкова важно ...
ОЩЕ
От Париж (на снимката), който наскоро премина CSS заседание на работната група, пристигнала забавни новини: Имоти решетка ред дефицит и решетка-колона-празнина, както и намаляването на решетка-празнина ...
Свързани статии