Что такое адаптивки
Arianne Martell
Да, ибо защита адаптивок != просто их использование, алло-о. =/ Мне серьёзно надо ЭТО объяснять? =/
Доктор Асфоделус
Я допускаю, что вы не планировали никого осуждать, но так уж пост читается. Раз не одна я вас неправильно поняла, то мне явно не показалось.
Arianne Martell
Значит, оно к вам и относится, что ж тут поделаешь. Кончайте защищать вредящие женщинам адаптивные практики, и не будете оскорбляться от постов со статистикой.
Тыщща и один материал о том, как стать жеженственной, нося каблучки и мокеяш, но проблема, конеш, в том, что я в личном блоге бомблю с защитниц адаптивок, дась.
Arianne Martell
А вы вообще в курсе, что такое «адаптивные практики», кстати.
Доктор Асфоделус
Кто сказал, что я защищаю?) Вредно-то оно вредно, с этим никто не спорит, но несмотря на картинку, вы не говорите о вреде и не недоумеваете, хотя, наверное, вы это и планировали делать. Просто пост реально выглядит как «40% женщин — дуры бесячие, заебали». И весь конструктив уходит.
А на каблуках выше 5 см после травмы я вообще ходить не могу. 😉
А вы вообще в курсе, что такое «адаптивные практики», кстати.
Я, например, нет (если это не про веб-дизайн). И как-то в выдаче гугла сразу не находится.
Michel_de049
О, сразу приходит в голову контраргумент (наверное, всё уже придумано за меня тысячу раз): а вы уверены, что личный выбор женщины не является следствием навязанных обществом и мужчинами установок? =)
Michel_de049
Ткните пальчиком, где я осуждаю женщин, носящих каблуки и называю их дурочками, пожалуйста.
Вы как-то странно понимаете концепцию «социум влияет на ваш выбор, поэтому рефлексируйте и рассуждайте о том, чего вы _действительно_ хотите», у фемсообщества нет силы контролировать и запрещать что-либо женщинам, если уже мы говорим об этом.
И ткните мне пальчиком, где и кому я запрещаю носить каблуки и прочие адаптивки, пожалуйста.
Arianne Martell
*фейспалм* Вы серьёзно? «О богиня, избави меня от длясибяшниц, сил уже нет их видеть, уж сколько твердишь, что каблук, выше необходимого поднятия стопы, ВРЕДЕН для здоровья, всё равно поют свою песню, ну ё моё. » — это осуждение женщин, которые носят каблуки, или тех, кто с пеной у рта рвётся защищать священное право женщин носить каблуки? «40% женщин — дуры бесячие, заебали» — ткните пальчиком, где я такое сказала, хотя бы и другими словами.
Доктор Асфоделус
Вот этими самыми словами и сказали. Серьёзно, и мне, как видите, не одной это увиделось. Просто на эмоциях не всегда удаётся донести свои мысли правильно, у всех бывает.
id_september
Это надо искать на фем-ресурсах. И ещё нужно немного подумать, чтобы не принять всё на свой счёт, как мы наблюдаем выше.
Кратко — общество — а конкретно патриархат — влияет на все сферы нашей жизни, поэтому прежде чем осуждать женщину за «свабодный выбар быть побитой/искалеченной бьюти-практиками/етк» важно подумать, что и как влияло на эти выборы. Такая же рефлексия идёт и на свои собственные жизненные выборы. То есть, утрируя, «фу, утиные губы, ну и дура» — это годами забиваемые в голову стандарты красоты и дрессировка поощрением и осуждением на приемлемый для индустрии красоты стандарт.
Человек животное социальное. Нельзя выкидывать влияние социума и среды из рассуждений о его действиях.
Доктор Асфоделус
Спасибо за пояснения. Осталось непонятно только, почему «адаптивные». Кто к чему адаптируется здесь?
Michel_de049
Я в отношениях с мужчиной. Я нахожусь в радфем среде. Не тащу своего мужика в движ, жива, никто не пришёл забирать у меня мужика.
И у вас тоже. Вас забанили в группе в интернете. Какая это власть? Вам запретили жить с вашим мужем? Кто вас назвал патриархальной подстилкой и где (чисто интересно, что за покемоны)?
О выражении «патриархальная подстилка» я слышу часто, но пока нигде по прямому назначению (в кач-ве оскорбления) использования его не видела. Только вот в таких примерах. А я. напоминаю, в среде тех самых ужжассных радфем, всех оскорбляющих и травящих.
Arianne Martell
Защитницы адаптивок резко стали всеми женщинами, носящими каблуки. Личный бомбёж от защитниц адаптивок стал оскорблением и запретом всем женщинам носить каблуки. Оке-ей.
id_september
Адаптация к социальной среде, разумеется. Женщины Китая с радостью и гордостью бинтовали ноги, хвастались и стыдили тех, у кого нога небинтована, но от этого эта практика не становится менее калечащей и менее навязанной. Это адаптация к среде, в которой они жили. Ведь делаешь это — получаешь одобрение. Не делаешь — получаешь осуждение. А дети — а бинтовали ноги с детского возраста — очень восприимчивы к этому. Далее, когда ты уже вырастаешь, это врастает в тебя крепко-крепко, выдирается только с мясом.
Кореянки, разумеется, «длясибя» отбеливают кожу и калечат себя на пластических операциях.
Всё растёт из малого. Малое перерастает в большее.
Доктор Асфоделус
Вот теперь прояснилось окончательно, еще раз спасибо)
id_september
Не за что, если что, стучитесь в лс, я могу скинуть сайтов с матчастью, там за разные года, много всякого, вообще в теории феминизма много интересных материалов.
Michel_de049
Таки кто? Мне правда интересно, я не знаю таких групп, где за _личный выбор_ банят, а не за защиту всякой херни.
Таки стоп. Осуждение конкретной женщины (или группы женщин) и критика адаптивок не одно и то же. Критикуя адаптивки, я не критикую женщин, их использующих. Это важно понимать.
То есть, сказать «фу, она носит каблуки и красится, ну что за говно у неё в голове» — осуждение женщины, а не адаптивок. Сказать «Каблуки вредны для женского здоровья, макияж ненужная трата денег и времени» мало того, что личное мнение об адаптивках, так ещё и ни разу не критика тех, кто этим пользуется.
Защищаться имеет смысл, когда на _тебя_ нападают. А когда говорят, что вещи привычные, казалось бы, и обычные могут быть проблемой, это не атака на _тебя_.
Michel_de049
«Не осудила», то есть, «промолчала»? Если впёрлись со своим важным неосуждением в коммы, я бы тоже забанила. Если я с чем-либо в радфем паблосе не согласна, то я иду читать материалы об этом, либо прохожу мимо, потому что это — мнение группы женщин, которое они выражают на своей площадке. Если кто-либо из моих радфемных сестёр оскорбляет женщин по причине «ну она адаптивки юзает/с мужиком спит/етк» — я либо оставляю её вариться в своей агрессии, пока не одумается, и ухожу молча, либо спорю.
Так, я в личном блоге бомблю на защитниц адаптивок, которые прутся ко мне в инфополе со своим «вы ничиво не понимаити, это длясибя, вы всё врёти». Это мой бомбёж. На определённых женщин. Которые делают определённые вещи. И это указано в посте. Осуждение защиты калечащих практик != осуждение женщин, использующих эти практики.
«вы в посте критикуете женщин, которые защищают свой выбор! Если женщина хочет что-то делать и защищает это право, то зачем на нее набрасываться, зачем оскорблять ее выбор, даже если вам кажется, что он навязан??» — да на кого я набросилась-то, родные мои, алло? =/ От чего вы их защищаете? От того, что я в личном блоге выложила картинку со статистикой и сказал, как меня заебали отрицающие очевидные вещи женщины? =/
Что защищать? Кто отбирает у женщин каблуки? Кто осуждает их здесь за _ношение_ каблуков? От чего защищаться?
Ни один фем-пост в инетике не отберёт у вас право носить каблуки. Ни один фем-пост в инетике не говорит, что женщины тупые курицы, раз носят каблуки(если только это действительно фем-пост).
Женщины, приходящие под посты и личные записи про вред адаптивок, не защищаются, они нападают. Потому что _их_ никто не атаковал.
В принципе, я всё сказала, одно и то же по кругу повторять мне надоело.
Адаптивная вёрстка: что это и как использовать
Адаптивная вёрстка позволяет правильно отображать содержимое веб-сайта на любых устройствах. Рассказываем, как это сделать.
Адаптивная вёрстка меняет дизайн страницы в зависимости от поведения пользователя, платформы, размера экрана и ориентации девайса и является неотъемлемой частью современной веб-разработки. Она позволяет существенно экономить и не отрисовывать новый дизайн для каждого разрешения, а менять размеры и расположение отдельных элементов.
В этой статье будут рассмотрены основные элементы сайта и способы их адаптации.
Примечание Вы читаете улучшенную версию некогда выпущенной нами статьи.
- Регулировка разрешения экранаЧастичное решение: делаем всё гибкимГибкие изображенияЕще один способ: отзывчивые изображенияИнтересная фича для iPhoneНастраиваемая структура макета страницыАдаптивная вёрстка с помощью медиазапросов CSS3JavaScriptОпциональное отображение контента
Регулировка разрешения экрана
В принципе, можно разбить устройства на разные категории и верстать для каждой из них отдельно, но это займет слишком много времени, да и кто знает, какие стандарты будут через пять лет? Тем более, согласно статистике мы имеем целый спектр разнообразных разрешений:
Становится очевидно, что мы не сможем продолжать верстать для каждого устройства отдельно. Но что тогда делать?
Частичное решение: делаем всё гибким
Конечно, это не идеальный способ, но он устраняет большую часть проблем с адаптивной вёрсткой.
Итан Маркотт (Ethan Marcotte) создал простой шаблон, демонстрирующий использование гибкой вёрстки:
Весь дизайн — микс адаптивных слоев, картинок и, в некоторых местах, умной разметки. Создание адаптивных слоев — частая практика, чего нельзя сказать об адаптивных картинках. Однако если они вам нужны, обратите внимание на следующие техники:
- Hiding and Revealing Portions of Images;
- Creating Sliding Composite Images;
- Foreground Images That Scale With the Layout.
Для более детальной информации рекомендуем ознакомиться с книгой Зои Микли Джилленуотер (Zoe Mickley Gillenwater) «Flexible Web Design: Creating Liquid Layouts with CSS» и загрузить главу «Creating Flexible Images».
На первый взгляд может показаться, что все легко, но это не так. Взгляните на логотип:
Если уменьшить изображение целиком, надписи станут нечитаемыми. Поэтому, чтобы сохранить логотип, картинка поделена на две части: первая часть (иллюстрация) используется как фон, вторая (логотип) изменяет свои размеры пропорционально.
Элемент h1 содержит изображение в качестве фона, а картинка выровнена относительно фона контейнера (заголовка).
Гибкие изображения
Работа с картинками — одна из самых главных проблем при работе с адаптивной вёрсткой сайтов. Существует много способов для изменения размера изображений, и большинство из них довольно просто реализовать. Одно из решений — использование max-width в CSS:
Максимальная ширина изображения равняется 100% от ширины экрана или окна браузера, поэтому чем меньше ширина, тем меньше картинка. Обратите внимание, что max-width не поддерживается в IE, поэтому используйте width: 100% .
Представленный способ является неплохим вариантом создания адаптивных изображений, но, изменив только размер, мы оставим вес картинки прежним, из-за чего время загрузки на мобильных устройствах увеличится.
Ещё один способ: отзывчивые изображения
Вы можете использовать Picturefill для того чтобы сделать изображения чувствительными к изменениям размера экрана.
Для этого нужно скачать файл picturefill.js, а затем написать следующий код, внутри тега head:
Чтобы подгрузка этого файла не влияла на загрузку сайта, рекомендуем добавить в тег script атрибут async. Это позволит сайту загружаться не дожидаясь файла picturefill.js. Однако, для того чтобы старые браузеры распознавали элементы picture, вам нужно добавить строку, document.createElement( «picture» ); перед первым тегом script.
Теперь вы можете использовать следующий код, для того чтобы указать браузеру какие изображения нужно отображать, в зависимости от размера окна:
![…]()
Атрибут sizes используется для того, чтобы указать сколько места будет занимать изображение. Подробнее о значениях sizes и srcset здесь.
Для более явного контроля над изображениями существует элемент picture.
Интересная фича для iPhone
В iPhone и iPod touch есть особенность: дизайн, созданный для больших экранов, просто сожмется в браузере с маленьким разрешением без скролла или дополнительной мобильной вёрстки. Однако изображений и текста не будет видно:
Для решения данной проблемы используется тег meta :
Если initial-scale равно единице, ширина картинок становится равной ширине экрана.
Настраиваемая структура макета страницы
Для значительных изменений размера страницы может понадобиться изменить расположение элементов в целом. Это удобно делать через отдельный файл с адаптивной вёрсткой CSS или, что более эффективно, через CSS-медиазапрос. Проблем возникнуть не должно, т. к. большинство стилей останутся прежними, и изменятся только некоторые.
Например, у вас есть главный файл со стилями, который задает #wrapper , #content , #sidebar , #nav вместе с цветами, фоном и шрифтами. Если ваши главные стили делают макет слишком узким, коротким, широким или высоким, вы можете это определить и подключить новые стили.
/* Основные стили, которые будут унаследованы дочерней таблицей стилей */ html,body < background. font. color. >h1,h2,h3<> p, blockquote, pre, code, ol, ul<> /* Структурные элементы */ #wrapper < width: 80%; margin: 0 auto; background: #fff; padding: 20px; >#content < width: 54%; float: left; margin-right: 3%; >#sidebar-left < width: 20%; float: left; margin-right: 3%; >#sidebar-right
#wrapper < width: 90%; >#content < width: 100%; >#sidebar-left < width: 100%; clear: both; /* Дополнительные стили для нового дизайна */ border-top: 1px solid #ccc; margin-top: 20px; >#sidebar-right< width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px; >
На широком экране левая и правая боковые панели хорошо помещаются сбоку. На более узких экранах эти блоки расположены один под другим для большего удобства.
Адаптивная вёрстка с помощью медиазапросов CSS3
Рассмотрим, как можно использовать CSS3-медиазапросы для создания адаптивного дизайна. min-width задает минимальную ширину окна браузера или экрана, к которой будут применены определенные стили. Если какое-нибудь значение будет ниже min-width , то стили будут проигнорированы. max-width делает противоположное.
@media screen and (min-width: 600px) < .hereIsMyClass < width: 30%; float: right; >>
Медиазапрос заработает только когда min-width будет больше или равна 600 px.
@media screen and (max-width: 600px) < .aClassforSmallScreens < clear: both; font-size: 1.3em; >>
В этом случае класс (aClassforSmallscreens) будет работать при ширине экрана меньше или равной 600 px.
В то время как min-width и max-width могут быть применимы и к ширине экрана, и к ширине окна браузера, нам может понадобиться работать только с шириной устройства. Например, чтобы игнорировать браузеры, открытые в маленьком окне. Для этого можно использовать min-device-width и max-device-width :
@media screen and (max-device-width: 480px) < .classForiPhoneDisplay < font-size: 1.2em; >> @media screen and (min-device-width: 768px) < .minimumiPadWidth < clear: both; margin-bottom: 2px solid #ccc; >>
Специально для iPad у медиазапросов есть свойство orientation, значениями которого могут быть либо landscape (горизонтальный), либо portrait (вертикальный):
@media screen and (orientation: landscape) < .iPadLandscape < width: 30%; float: right; >> @media screen and (orientation: portrait) < .iPadPortrait < clear: both; >>
Также значения медиазапросов можно комбинировать:
@media screen and (min-width: 800px) and (max-width: 1200px) < .classForaMediumScreen < background: #cc0000; width: 30%; float: right; >>
Этот код будет выполнен только для экранов или окон браузеров шириной от 800 до 1200 px.
Загрузить определенный лист со стилями для разных значений медиазапросов можно так:
JavaScript
Если ваш браузер не поддерживает CSS3-медиазапросы, то замену стилей можно организовать с помощью jQuery:
Опциональное отображение контента
Возможность сжимать и менять местами элементы, чтобы они уместились на маленьких экранах, — это замечательно. Но это не лучший вариант. Для мобильных устройств обычно используется более широкий набор изменений: упрощенная навигация, более сфокусированный контент, списки или строки вместо колонок.
К счастью, CSS дает нам возможность показывать и прятать контент с неимоверной легкостью.
display: none;
display: none используется для объектов, которые нужно спрятать.
Вот наша разметка:
Left Sidebar Content | Right Sidebar Content
Main Content
A Left Sidebar
A Right Sidebar
В главном файле стилей мы меняем ссылки на колонки, т. к. у нас достаточно большой экран, чтобы отобразить весь контент.
#content < width: 54%; float: left; margin-right: 3%; >#sidebar-left < width: 20%; float: left; margin-right: 3%; >#sidebar-right < width: 20%; float: left; >.sidebar-nav
Теперь прячем колонки и показываем ссылки:
#content < width: 100%; >#sidebar-left < display: none; >#sidebar-right < display: none; >.sidebar-nav
Если размер экрана уменьшается, можно, например, использовать скрипт или альтернативный файл со стилями, чтобы увеличить белое пространство или заменить навигацию для большего удобства. Таким образом, имея возможность прятать и показывать элементы, изменять размеры картинок, элементов и многое другое, можно создавать адаптивную вёрстку под любые устройства и экраны.
О примерах использования адаптивной вёрстки сайтов вы можете почитать в лучших практиках по реализации адаптивного веб-дизайна.
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.