{"draftJsState":{"blocks":[{"data":{"image":{"id":"5e2c4e8934808200b1d850bf"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Один и тот же контент в зависимости от размера экрана","type":"atomic:image","key":"foi1u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cfl9s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Практически любой сайт (или веб-приложение) проектируется как для компьютера, так и для мобильного телефона. На сегодняшний день мобильный трафик несколько обходит трафик персональных компьютеров, что означает, что нашей задачей, как разработчиков интерфейсов, является адаптация интерфейса как под экраны компьютеров, так и под экраны телевизоров и мобильных телефонов. ","type":"unstyled","key":"d73du"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS содержит специальные правила, которые могут включаться в зависимости от разрешения экрана пользователя. Здесь мы рассмотрим лишь базовые примеры, но настоятельно рекомендую углубиться в эту тему. ","type":"unstyled","key":"9vp3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Существует два подхода к вёрстке: desktop-first и mobile-first. Когда мы говорим о desktop-first, это означает, что сайт изначально проектируется под большой экран, а далее видоизменяется к меньшим разрешениям, подключая дополнительные правила. При использовании подхода mobile-first, сайт проектируется под экраны мобильных телефонов, а затем, если разрешение экрана позволяет, подключает дополнительные правила расположения блоков на странице, чтобы сайт перестраивался под большие экраны. Общепринятым стандартом является использование подхода mobile-first. Дело в том, что мобильные устройства считаются более слабыми, поэтому мы можем сэкономить их вычислительный ресурс, не давая включать правила для больших экранов. Пойдём от обратного. Представим, что мы используем подход desktop-first. Тогда, при открытии сайта с телефона, браузер сначала рассчитает все правила для больших экранов, затем поймет, что разрешение экрана маленькое и включит еще слой дополнительных правил. Именно в этом месте у нас и произойдет экономия. Пусть устройства с большими экранами подключают дополнительные правила, ведь почти всегда эти устройства имеют большую вычислительную мощность. ","type":"unstyled","key":"g14i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":48,"style":"ITALIC"}],"text":"Для задания правила используется ключевое слово @media, где указывается, например, минимальная (для подхода mobile-first) ширина экрана. ","type":"unstyled","key":"5vgcl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рассмотрим пример:","type":"unstyled","key":"4um17"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"ITALIC"}],"text":"@media(min-width: 720px) {\n ...\n}","type":"blockquote","key":"1nnf4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь мы видим, что если разрешение экрана больше 720 точек, мы включим дополнительные CSS-правила, позволяющие иначе расположить блоки на странице. Внутри фигурных скобок мы можем писать обычный CSS-код. ","type":"unstyled","key":"e6kgt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разберём задачу. Пусть нам необходимо расположить 6 прямоугольных блоков на странице таким образом, чтобы на экране мобильного телефона они располагались друг под другом, на экране планшета мы видели по два блока на строку, а на экране компьютера — по три блока на строку. ","type":"unstyled","key":"ar0pk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используем подход mobile-first. Опишем изначальный HTML:","type":"unstyled","key":"eppb8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":94,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"85k2k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И CSS:","type":"unstyled","key":"68djv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":119,"offset":0,"style":"ITALIC"}],"text":"ul {\n display: block;\n list-style: none;\n margin: 0;\n padding: 0;\n}\nli {\n display: block;\n width: 100%;\n float: left;\n}","type":"blockquote","key":"3mfpg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь сделаем так, чтобы на планшетах в одной строке было два блока. Сделаем предположение, что планшеты - это устройства с экранами более 720 точек в ширину.","type":"unstyled","key":"5opdp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":53,"offset":1,"style":"ITALIC"}],"text":" @media(min-width: 720px) { \n li {\n width: 50%;\n }\n} ","type":"blockquote","key":"4h6fl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И сделаем ещё одно правило для крупных устройств:","type":"unstyled","key":"5n86s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":0,"style":"ITALIC"}],"text":"@media(min-width: 1200px) { \n li {\n width: 33%;\n } \n} ","type":"blockquote","key":"al5jo"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":40,"offset":137}],"inlineStyleRanges":[],"text":"\nТаким образом мы реализовали отзывчивый список, который подстраивается под любое разрешение экранов. Проверить его работы можно здесь: https://codepen.io/artik-man/pen/oNgVqXp ","type":"unstyled","key":"6364t"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":42,"offset":83},{"key":2,"length":49,"offset":207}],"inlineStyleRanges":[{"length":13,"offset":68,"style":"BOLD"}],"text":" Эту и другие статьи можно почитать в моём практическом руководстве HTML Practice: https://artik-man.github.io/HTML-Practice/\nЕсли у вас возникли идеи для новой главы этой книги, присылайте issue на GitHub: https://github.com/Artik-Man/HTML-Practice/issues ","type":"unstyled","key":"9f53q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"26aenoVnEXe6NkH6FRiO"}],"entityMap":{"0":{"data":{"href":"https://codepen.io/artik-man/pen/oNgVqXp","url":"https://codepen.io/artik-man/pen/oNgVqXp"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://artik-man.github.io/HTML-Practice/","url":"https://artik-man.github.io/HTML-Practice/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://github.com/Artik-Man/HTML-Practice/issues","url":"https://github.com/Artik-Man/HTML-Practice/issues"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}