shrink to fit что это
Вся правда о LEVI’S 501 Shrink-to-Fit
Если уж деним переживает второе рождение и находится на пике моды, мы решили опубликовать несколько полезных рекомендаций по уходу за ними
Сегодня мы поговорим о Levi’s и их легендарных LEVI’S 501 Shrink-to-Fit.
Редко случается, что компания выпускает коллекции, в которых вам хочется скупить почти все, обладает авторитетом в своей нише и при этом оказывается в приемлемой ценовой категории. В дениме к счастью есть Levi’s.
Надо отметить, что современная джинсовая одежда шьется из ткани, которая дает усадку 1 процент, технологию специально обработки ткани для такого утилитарного эффекта разработали еще в 1920. Однако, у Levi’s есть LEVI’S 501 Shrink-to-Fit, именно эта модель дает усадку при первой стирке 7- 10 %, при последующих стирках усадка возрастет до 10-12%
Эта модель Levi’s сделана из так называемой «необработанной джинсовой ткани». Казалось бы, ради чего терпеть такие трудности, вычисляя какой размер именно этих джинсов вам нужен? Дело в том, что такая ткань, не смотря на свою вот такую непрактичность, имеет ряд преимуществ. Усадка в случае LEVI’S 501 Shrink-to-Fit происходит по фигуре владельца. Что создает ваш неповторимый образ.
Вы, наверное, сталкивались с тем, что иногда вам нужно померить несколько пар джинсов, чтобы найти те которые сели вам по фигуре? Одни вам широки в талии, но хороши в бедрах, другие все хорошо, но узки в икрах и т.д. Все это происходит по причине того, что у всех фигура разная. Я как никто другой знаю эту проблему, потому, что оказалось, что моя филейная часть зачастую не вписывается в представление производителей мужской одежды об этой самой филейной части. Я могу померить до 10-ти джинсов и так ничего себе не найти. Необработанная джинсовая ткань или Raw Denim во многом помогает решить данную проблему.
Кроме усадки по фигуре эти джинсы меняются и в цвете с течением времени, образуются естественные эффекты на джинсах, которые в другие модели привносятся искусственно — «усы» на вершине бедер, «соты» на задней части коленей и «трубы» на лодыжках.
Raw Denim, как тот, из которого пошиты мои 501 STF более жесткие, чем обычная джинсовая ткань. Это создает менее свободные движения в джинсовой ткани и в результате появляется своеобразная «укладка» и заломы. Можете быть уверены, что через какое-то время у вас будут совершенно уникальные по дизайну джинсы.
На самом деле мои первые Shrink to Fit’s были первым моим приключением с Raw Denim, меня приятно удивили, тем насколько они дорого выглядели по сравнению с тем, сколько я за них заплатил. LEVI’S 501 Shrink-to-Fit при желании можно найти в Интернете за 40 долларов. В большей части магазинов вам предложат классические LEVI’S 501 Shrink-to-Fit прямого кроя, под которые можно надеть сапоги.
Есть правда и неприятный момент, который не позволит мне с достаточной уверенностью защищать LEVI’S 501 Shrink-to-Fit, производители не рекомендуют стирать такие джинсы после первой усадки, сейчас у вас будет шок, до полугода. Выход из такого положения предлагают весьма неординарный – положить джинсы в морозильную камеру на ночь — такой маневр убивает запах несвежих джинсов не вызывая усадки и выцветания.
Стирать Raw Denim следует в холодной воде (за исключением процесса усадки) вывернув наизнанку, чтобы сохранить цвет. Гуру от денима, наверное, даже предложили бы прямо в джинсах забраться в холодную воду, чтобы сохранить размер и форму, когда они нуждаются в чистке, но думаю вариант этот не для нас.
Как альтернативу можно пользоваться, наверное, и стиральной машинкой с холодной водой, без отжима и сушилки, если загрязнения не позволит вам ждать до 6-ти месяцев.
После стирки еще несколько дней вы можете испытывать небольшие стеснения в некоторых местах, но это быстро проходит из-за способности ткани адаптироваться к вам.
Правильно проведенная усадка или первая стирка очень важна для этих джинсов.
Правильная калибровка
Инструкция Levi’s предлагает таблицу, которая объясняет, сколько дюймов необходимо добавить к вашему обычному размеру, что определится с тем, который вам необходим
Обратите внимание, что в последнее время ритейлеры взяли привычку указывать меньший размер, чем на самом деле, здесь не угадаешь и выход только один – проверять сантиметровой лентой.
Размер талии — усадка
27-36 » на 1″
38-48 » на 2″
50 «и выше на 3″
Внутренний шов — усадка
27-34 » на 3″
36 «и выше на 4»
На фото LEVI’S 501 Shrink-to-Fit до и после усадки:
Горячая ванна
Необработанный деним, вступая в контакт с водой, уменьшается в размерах в процессе сушки.
Наберите в ванну горячую воду, только не переборщите с температурой. Нужно налить достаточно воды, чтобы в нее полностью могли бы погрузиться джинсы. Теперь выверните джинсы наизнанку, чтобы защитить как можно больше красителя индиго, и поместите ваши джинсы в воду, убедившись, что они полностью намокли.
Вы увидите, как краска окрасит воду, не бойтесь – ваша ванна не пострадает.
Повесьте и высушите
Оставшаяся синяя вода
Сухое полотенце
После того как с джинсов перестанет капать, положите их на плоскую поверхность между двумя полотенцами. Я использовал синие полотенца для этого. Они получили синий оттенок, но отстирались полностью после первой же стирки.
Теперь прогуляемся по полотенцам, чтобы удалить воду из джинсов, насколько это возможно. Переверните на другую сторону и повторите операцию.
Придание формы
Теперь у вас влажные джинсы. Сейчас я вас тоже немного удивлю, но вам придется одеть их на себя. Мои джинсы при достаточном усердии на прошлом этапе сушатся менее чем за час. С осторожностью садитесь, запаситесь полотенцами, потому что краска все еще может сходить.
На самом деле этот путь труден, но результат меня лично больше чем устраивает.
Запомните, что стирать нужно их только по необходимости, носите их как можно больше. Да, необработанная джинсовая ткань – это что-то особенное, то, что делает ваш деним по-настоящему уникальным. Конечно, трудности здесь есть и, пожалуй, LEVI’S 501 Shrink-to-Fit на любителя в плане ухода, но если вы смирились с недостатками, то эта вещь станет определенно вашей любимой.
Как выбрать джинсы Levi’s shrink to fit
В статье мои советы. Всё просто. Я не навязываю своего мнения,
Можно воспользоваться советом производителя.
На картонном ярлыке производитель даёт рекомендации по выбору размера в двух вариантах:
1.При условии машинной стирки и сушке. Запас нужно брать существенный, как в поясе так и в росте. Это для ленивых.
2.Для тех кто не собирается стирать джинсы вовсе, предпочитая абсолютно естественную картину износа, нужно купить свой размер.
Я не отношу себя ни к первым, ни ко вторым.
Поэтому делаю усадку, и последующие стирки, своими руками в холодной воде
Из собственного опыта знаю что сырой Denim от Levi’s,
Садится в длину дважды, после двух замачиваний
У меня были 517-е в жестком варианте, и srink to fit которым уже 5-й год
Хочу отметить следующее:
Жесткие джинсы сначала ношу, до первой воды, обминая на себе
Что бы появились складки под коленом и впереди
Да, появляются горизонтальные потёртости внизу штанин, но у меня отношение к джинсам
Как к джинсам, и меня подобные мелочи не волнуют. От слова СОВСЕМ.
Итак, как я говорил выше, усадку делаю в два этапа.
В холодной воде, без моющих средств.
Совет от себя: покупайте свой размер в поясе и на один размер длинней
После замачивания, повесив сушить, дождаться момента когда
Ткань почти сухая, одеть на себя. Посидеть в них, что бы джинсы
Слегка вытянулись на поясе и бедрах и окончательно приняли
Силуэт вашей фигуры. Этот процесс необходимо повторить.
Уже после первого замачивания ткань приобретет ровный синий цвет
Пока они не мочёные, есть сероватый оттенок
И да! Они будут очень жесткие. Их можно будет поставить
В чем вы сможете убедиться если будете сушить без отжима, в расправленном состоянии.
Размещаю видео с подробными замерами джинсов после двух этапной усадки
Основы адаптивной вёрстки
Рассмотрим основы адаптивной вёрстки, что такое область просмотра (viewport), как использовать @media запросы и некоторые не самые очевидные нюансы
Что такое адаптивная вёрстка?
Адаптивная вёрстка подразумевает под собой вёрстку под разные устройства на основе @media запросов. Если условие @media запроса выполняется, то будут применены соответствующие стили
@media запросы могут быть основаны на размерах, типе, ориентации, разрешении, пропорциях устройства, на различных состояниях элементов, и других условиях, включая даже уровень окружающего освещения
В данной статье рассмотрим основы адаптивной вёрстки, основанной на размерах области просмотра (viewport)
Область просмотра (viewport)
Чтобы @media запросы корректно работали на мобильных устройствах необходимо добавить специальный мета тег
Мета тег отвечает за размер области просмотра и масштаб страницы на мобильных устройствах
Мета тег размещаем в HTML файле в секции
Для мета тега добавляем атрибут content=»» и указываем в нём необходимые свойства через запятую
Этих свойств достаточно, чтобы @media запросы корректно работали на мобильных устройствах
Существуют дополнительные свойства, которые можно добавить для мета тега в атрибуте content=»»
Как узнать размеры области просмотра (viewport)?
Для разработки и тестирования адаптивной вёрстки по размерам области просмотра (viewport) необходимо определить эти размеры
Браузеры Google Chrome и Mozilla Firefox имеют инструменты для тестирования адаптивной вёрстки, которые отображают размеры внутреннего окна и могут устанавливать необходимый размер окна по введенным значения
Чтобы открыть инструмент для адаптивной вёрстки в Mozilla Firefox нажимаем клавишу F12 и в инструментах разработчика в правом верхнем углу нажимаем на иконку со смартфоном и планшетом
Окно станет выглядеть следующим образом
Окно станет выглядеть следующим образом
@media запросы
При Mobile First верстаем от меньшего экрана к большему и применяем @media (min-width: 1200px)
При Desktop First верстаем от большего экрана к меньшему и применяем @media (max-width: 1199.98px)
На практике Mobile First встречается реже, чем Desktop First, поэтому обычно сначала верстаем макет для больших экранов, затем с помощью @media запросов адаптируем макет под меньшие экраны, используя контрольные точки (breakpoints).
@media запросы записываются в CSS файле следующим образом
Разница в 0.02px нужна для избежания пересечения @media запросов, чтобы разные стили не применялись для двух разных @media запросов одновременно
Контрольные точки (breakpoints)
Для примера возьмем контрольные точки, которые используются в Bootstrap
Bootstrap использует @media запросы основанные на размерах большинства устройств, поэтому не обязательно придумывать свои контрольные точки, а при необходимости можно добавить еще @media запросы или изменить существующие
Логика адаптивной вёрстки Desktop First
Предположим, есть макет шириной 1170px. Верстаем его в браузере на большом экране. Пишем основные стили. Когда десктоп версия макета готова, начинаем делать адаптивную вёрстку.
Проверяем вёрстку при этих размерах. Если вёрстка соответствует макету, элементы не выходят за границы окна браузера, и не появляется горизонтальной полосы прокрутки, то продолжаем.
Обратите внимание, что мы не должны переписывать все свойства элементов, а только переназначаем необходимые свойства
Переназначаем стили в блоке @media запроса @media (max-width: 991.98px) < >, чтобы вёрстка выглядела корректно теперь при ширине 768px
Далее устанавливаем ширину 576px и переназначаем стили в блоке @media (max-width: 767.98px)
Если дизайнер/заказчик не указали минимальную ширину для адаптивной вёрстки, то устанавливаем 320px. Для этой ширины переназначаем стили элементов в блоке @media запроса @media (max-width: 575.98px)
Когда вёрстка будет выглядеть корректно при всех вышеописанных размерах браузера (1200px, 992px, 768px, 576px, 320px), проверяем вёрстку плавно изменяя размер окна от большего к меньшему, чтобы убедиться что при промежуточных размерах вёрстка не ломается. При неоходимости корректируем стили элементов в том блоке @media запроса, где элементы отображаются некорректно, для этого используем инструменты разработчика (devtools) в браузере
Инструменты разработчика (devtools)
Инструменты разработчика позволяют быстро найти элемент, посмотреть его размеры, отступы, стили, расположение стилей, использование @media запросов, менять значение свойств прямо в браузере
Открыть инструменты разработчика можно нажатием клавиши F12
Чтобы просмотреть сразу расположение элемента и отобразить его свойства нажимаем правой кнокой мыши на элемент и выбираем Исследовать элемент в Mozilla Firefox или Просмотреть код в Google Chrome
Например, хотим узнать про элемент заголовка карточки, нажимаем на нём правой кнопкой мыши и выбираем Исследовать элемент в Mozilla Firefox
Открывается окно инструментов, где с левой стороны видим расположение элемента в HTML, а справой стороны CSS свойства элемента
Чтобы визуально посмотреть размеры и отступы элемента, в левой части инструментов разработчика наводим курсор мыши на элемент, и в браузере будут отображены свойства элемента
В правой части инструментов разработчика можно выбрать значение CSS свойства и назначить другое значение, в браузере сразу же будут видны изменения.
Значение можно писать вручную или постепенно менять значение стрелками вверх или вниз на клавиатуре.
При вводе значения вручную будут выводиться подсказки
Если значение некорректно и не применяется, то будет перечеркнуто
Можно самостоятельно отключить необходимое свойство, нажав на чекбокс перед этим свойством
Можно назначить новое свойство, нажав на пустое место в пределах блока свойств элемента. Также будут выведены подсказки возможных свойств
Все эти изменения сразу отображаются в браузере, что удобно при разработке и отладке адаптивной вёрстки. После перезагрузки страницы изменения сбрасываются
Простой пример адаптивной вёрстки
Ниже распишу только ключевые моменты адаптивности
Начальные стили десктоп вёрстки при ширине 1200px
При ширине 992px карточки немного сужаются, но все еще отображаются корректно, поэтому пока без изменений
При ширине 576px карточки также становятся узкими, поэтому снова переназначаем свойство карточки width чтобы карточки отображались по одной
Пример специально взял упрощенный, чтобы просто показать логику адаптивной вёрстки. Возможно, через некоторое время запишу видео с адаптивной вёрсткой более сложной секции и добавлю в эту статью
Дополнительно
Немного дополнительной информации по адаптивной вёрстке
@media запросы по размерам viewport могут быть как по ширине, так и по высоте, но используется обычно реже
@media запросы можно комбинировать, например нужны только стили для планшетных экранов в диапазоне от 576px до 767.98px
Стили назначенные в таком @media запросе будут применены только если все условия выполнены
Для упрощения адаптивной вёрстки желательно использовать Flexbox, Grid.
Желательно стараться использовать не фиксированные, а относительные величины (%, vw, vh, em, rem и так далее)
Итоги
В статье разобрали основы адаптивной вёрстки, но этих знаний достаточно, чтобы начать делать адаптивную вёрстку.
На практике можно применять дополнительные возможности @media запросов отталкиваясь от уже полученной информации.
При возможности, статья еще будет дополняться
Базовая структура HTML-документа с объяснением каждой строчки
Под катом — разбор каждой строчки
Обычно, когда я начинаю новый проект, я либо копирую HTML-структуру последнего сайта, который я создал, либо перехожу к HTML5 Boilerplate и копирую их шаблон. Недавно я не начал новый проект, но мне пришлось документировать структуру, которую мы используем на работе для сайтов, которые мы строим. Таким образом, простое копирование и вставка не были вариантом, я должен был понять, какой выбор был сделан. Поскольку я потратил довольно много времени на исследование и создание структуры, я решил поделиться ею с вами.
Разбор каждой строки
Общее
Для олдскульщиков, нам не нужны никакие другие doc types, которые вы выучили наизусть. Этот будет единственным и неповторимым. Несмотря на то, что сегодня нет других реальных вариантов, он должен присутствовать по соображениям совместимости.
Этот атрибут объявляет кодировку символов документа. Если оставить его выключенным, определенные символы могут отображаться некорректно в некоторых браузерах.
Вот как Safari отображает мое имя с метатегом charset и без него.
Manuel Matuzović — Manuel Matuzović
Мета-тег области просмотра позволяет нам изменять ширину области просмотра, что необходимо для адаптивного веб-дизайна. width = device-width устанавливает ширину области просмотра равной ширине экрана. initial-scale управляет уровнем масштабирования при первой загрузке страницы.
Я не уверен, что установка initial-scale = 1 по-прежнему необходима. Кажется, я где-то читал, что это нужно только для Safari на viewport должен появляться в документе как можно раньше, чтобы обеспечить правильную визуализацию документа.
Параметр shrink-to-fit = no больше не нужен, начиная с iOS 9.3.
Заголовок, описание, соцмедиа
Уникальное название страницы. Он отображается во многих местах, например, на вкладке браузера, в результатах поиска, когда вы сохраняете страницу в качестве закладки и т.д.
Я режу горчицу при поддержке модуля JS. Если браузер поддерживает модули JavaScript, это означает, что это браузер, который поддерживает современный JavaScript, такой как модули, синтаксис ES 6, выборка и т. Д. Я отправляю большую часть JS только этим браузерам и использую класс js в CSS, если стили компонента отличается, когда JS активен.
Print CSS для сайта.
Уникальное описание страницы, например, отображаемое на страницах результатов поиска. Он может быть любой длины, но поисковые системы усекают фрагменты до
Уникальное название страницы. Используется парсерами URL-адресов в социальных сетях, таких как Twitter или Facebook.
Уникальное описание страницы. Используется парсерами URL-адресов в социальных сетях, таких как Twitter или Facebook.
Изображение, отображаемое, когда вы делитесь ссылкой на страницу в социальных сетях, приложениях чата или других сайтах, которые очищают URL-адреса.
В идеале это должно быть квадратное изображение с важным содержанием, размещенным в центре квадрата в прямоугольнике с соотношением сторон 2:1. Это гарантирует, что изображение будет хорошо смотреться на карточках с изображениями прямоугольной и квадратной формы.
Вот как это изображение будет выглядеть в Twitter и WhatsApp.
Правила для Twitter: изображения для этой Card поддерживают соотношение сторон 2:1 с минимальными размерами 300×157 или максимальными 4096×4096 пикселей. Размер изображений не должен превышать 5 МБ. Поддерживаются форматы JPG, PNG, WEBP и GIF.
Описание изображения. Не используйте этот метатег, если изображение носит чисто декоративный характер и не содержит значимой информации. Программы чтения с экрана игнорируют изображение, если мы не предоставляем замещающий текст.
Необязательное свойство Open Graph, но рекомендуется. Он определяет естественный язык страницы.
Канонический URL страницы. Обязательное свойство для допустимых страниц Open Graph.
Иконки и адресная строка
theme-color предоставляет браузерам цвет CSS для настройки отображения страницы или окружающего пользовательского интерфейса.
Поддерживаемые браузеры: Chrome, Brave и Samsung Internet на Android.
Значок 32 × 32 пикселя для устаревших браузеров. Он должен находиться в корне вашего веб-сайта.
Большинство современных браузеров поддерживают значки SVG. Преимущества favicon.svg в том, что он выглядит лучше при масштабировании, потому что это векторное, а не растровое изображение, и мы можем добавлять HTML и CSS в SVG, что означает, что мы можем поддерживать темный режим.
Фавикон на моем сайте в светлом режиме.
Фавикон на моем сайте в тёмном режиме.
Значок 180 × 180 пикселей устройства Apple будут использовать, если вы добавите страницу на главный экран.
Используйте элемент canonical ссылки, чтобы предотвратить проблемы SEO, вызванные дублированием контента, указав исходный источник для страниц, доступных по нескольким URL-адресам.
Это не абсолютный минимум, но это то, что мне нужно на большинстве сайтов, которые я создаю. Подводя итог, я добавил к этому сообщению несколько тегов, которые нам, вероятно, больше не нужны, а также некоторые другие, которые могут вам понадобиться время от времени. Если вы хотите узнать больше об элементе head и его дочерних элементах, ознакомьтесь с фантастическим репозиторием HEAD Джоша Бучи.
Штуковины, которые нам больше не нужны
По словам Андрея Ситника, для последних версий Windows этого больше не требуется.
Начиная с IE11, режимы документов устарели и больше не должны использоваться, кроме как на временной основе.
Начиная с IE11, режим Edge является предпочтительным режимом документа; он представляет собой высочайшую поддержку современных стандартов, доступных для браузера.
Начиная с Safari 12, нам больше не нужен отдельный вариант значка для закрепленных вкладок.
Другие примечательные элементы
RSS-канал для вашего сайта.
Отключите автоматическое определение и форматирование телефонных номеров.
Запретите Twitter использовать информацию о вашем сайте в целях персонализации.
Облачные серверы от Маклауд быстрые и безопасные.
Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!