<!DOCTYPE html>
<html class="h-100" data-bs-theme="light" data-mantine-color-scheme="light" lang="ru" prefix="og: https://ogp.me/ns#">
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<link crossorigin="true" href="https://cdn.hexlet.io" rel="preconnect">
<link href="https://mc.yandex.ru" rel="preconnect">
<meta content="aa2vrdtq64dub8knuf83lwywit311w" name="facebook-domain-verification">
<link href="/favicon.ico" rel="icon" sizes="any">
<link href="/favicon.svg" rel="icon" type="image/svg+xml">
<link href="/apple-touch-icon.png" rel="apple-touch-icon">
<link href="/manifest.webmanifest" rel="manifest">
<script>
//<![CDATA[
window.gon={};gon.ym_counter="25559621";gon.is_bot=true;gon.applications={};gon.current_user={"id":null,"last_viewed_notification_id":null,"email":null,"state":null,"first_name":"","last_name":"","created_at":"2026-02-26 17:26:12 UTC","current_program":null,"current_team":null,"full_name":"","guest":true,"can_use_paid_features":false,"is_hexlet_employee":false,"sanitized_phone_number":"","can_subscribe":true,"can_renew_education":false};gon.token="efA6H4JsBNnXK37ovSGg7mqjOpd6OtzLyzCvg38gZx6WIfEocBKpuWFoWnCxLlCZqqoXPXINIml20DXXLSeAcA";gon.locale="ru";gon.language="ru";gon.theme="light";gon.rails_env="production";gon.mobile=false;gon.google={"analytics_key":"UA-1360700-51","optimize_key":"GTM-5QDVFPF"};gon.captcha={"google_v3_site_key":"6LenGbgZAAAAAM7HbrDbn5JlizCSzPcS767c9vaY","yandex_site_key":"ysc1_Vyob5ZPPUdPBsu0ykt8bVFdzsfpoVjQChLGl2b4g19647a89","verification_failed":null};gon.social_signin=false;gon.typoreporter_google_form_id="1FAIpQLSeibfGq-KvWQ2Fyru-zkFFRVTLBuzXAHAoEyN1p49FtDmNoNA";
//]]>
</script>
<meta charset="utf-8">
<title>Медиа-запросы и другие устройства | CSS: Адаптивность сайта</title>
<meta name="description" content="Медиа-запросы и другие устройства / CSS: Адаптивность сайта: Выясняем, для каких устройств возможно применять свои стили">
<link rel="canonical" href="https://ru.hexlet.io/courses/css-adaptive/lessons/other-device/theory_unit">
<meta name="robots" content="noarchive">
<meta property="og:title" content="Медиа-запросы и другие устройства">
<meta property="og:title" content="CSS: Адаптивность сайта">
<meta property="og:description" content="Медиа-запросы и другие устройства / CSS: Адаптивность сайта: Выясняем, для каких устройств возможно применять свои стили">
<meta property="og:url" content="https://ru.hexlet.io/courses/css-adaptive/lessons/other-device/theory_unit">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="XxVkVqrXA5CekR4rnjcDEv4TzjiwBA2hCwJvVy_zGDywxK9hWKmu8CjSOrOSOPNlPhrjkrgz8wO24vUDffT_Ug" />
<script src="/vite/assets/inertia-INZxX8jp.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/preload-helper-BJ4cLWpC.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/init-nkZBEvfU.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ahoy-DrlRQ-1D.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/analytics-6pOtQ3OW.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ErrorFallbackBlock-naDSYSy9.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Surface-DL2bpZA-.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/gon-D3e4yh1x.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/mantine-CGMYrt2Y.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/utils-DRqSHbQE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-CCH8ilKF.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/extends-C-EagtpE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/inheritsLoose-BBd-DCVI.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/objectWithoutPropertiesLoose-DRHXDhjp.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/index.esm-DAqKOkZ0.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Button-CGPUux8l.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/CloseButton-D1euiPao.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Group-BX48WcuU.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Loader-BQEY8g6v.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Modal-Cy3HByv7.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/OptionalPortal-1Hza5P2w.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Stack-CtjJzfw4.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Textarea-Ck64llAy.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Box-B5-OOzBf.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/DirectionProvider-Dc9zdUke.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/events-DJQOhap0.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/use-reduced-motion-D2owz4wa.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/use-disclosure-zKtK5W1r.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/use-hotkeys-Cnc_Rwkb.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/random-id-DOQyszCZ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/notifications.store-C-3AFSMn.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/exports-C_MrNx_T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/axios-BEvgo0ym.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dayjs.min-BkKovM-s.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/i18next-BlSq9s7B.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/client-U9M77rxp.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-dom-DaLxUz_h.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useTranslation-Bx1Cdrkz.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/compiler-runtime-6XxiPFnt.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/jsx-runtime-CwjcCKJi.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-CkL4ZRHB.js" as="script" crossorigin="anonymous">
<link rel="stylesheet" href="/vite/assets/application-BqhCP46M.js" />
<script src="/vite/assets/application-Df9RExpe.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/autocomplete-VMNbxKGl.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-CCH8ilKF.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/createPopper-C3aM9r1M.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/js.cookie-D1-O8zkX.js" as="script" crossorigin="anonymous"><link rel="stylesheet" href="/vite/assets/application-C8HjmMaq.css" media="screen" />
<script>
window.ym = function(){(ym.a=ym.a||[]).push(arguments)};
window.addEventListener('load', function() {
setTimeout(function() {
ym.l = 1*new Date();
ym(window.gon.ym_counter, "init", {
clickmap: true,
trackLinks: true,
accurateTrackBounce: true,
webvisor: true
});
// Загружаем скрипт
var k = document.createElement('script');
k.async = 1;
k.src = 'https://mc.yandex.ru/metrika/tag.js';
document.head.appendChild(k);
ym(window.gon.ym_counter, 'getClientID', function(clientID) {
window.ymClientId = clientID;
});
}, 1500);
});
</script>
<!-- Google Tag Manager - deferred -->
<script>
// dataLayer stub сразу — пуши работают до загрузки скрипта
window.dataLayer = window.dataLayer || [];
// Сам скрипт — отложенно после load
window.addEventListener('load', function() {
setTimeout(function() {
dataLayer.push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
var j = document.createElement('script');
j.async = true;
j.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-WK88TH';
document.head.appendChild(j);
}, 1500);
});
</script>
<!-- End Google Tag Manager -->
</head>
<body>
<noscript>
<div>
<img alt="" src="https://mc.yandex.ru/watch/25559621" style="position:absolute; left:-9999px;">
</div>
</noscript>
<header class="sticky-top bg-body">
<nav class="navbar navbar-expand-lg">
<div class="container-xxl">
<a class="navbar-brand" href="/"><img alt="Логотип Хекслета" height="24" src="https://ru.hexlet.io/vite/assets/logo_ru_light-BpiEA1LT.svg" width="96">
</a><button aria-controls="collapsable" aria-expanded="false" aria-label="Меню" class="navbar-toggler border-0 mb-0 mt-1" data-bs-target="#collapsable" data-bs-toggle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsable">
<ul class="navbar-nav mb-lg-0 mt-lg-1">
<li class="nav-item dropdown">
<button aria-haspopup class="btn nav-link" data-bs-toggle="dropdown" type="button">
Все курсы
<span class="bi bi-chevron-down align-middle ms-1"></span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item d-flex py-2" href="/courses"><div class="fw-bold me-auto">Все что есть</div>
<div class="text-muted">117</div>
</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="dropdown-item">
<b>Популярные категории</b>
</li>
<li>
<a class="dropdown-item py-2" href="/courses_devops">Курсы по DevOps
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_data_analytics">Курсы по аналитике данных
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_programming">Курсы по программированию
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_testing">Курсы по тестированию
</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="dropdown-item">
<b>Популярные курсы</b>
</li>
<li>
<a class="dropdown-item py-2" href="/programs/devops-engineer-from-scratch">DevOps-инженер с нуля
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/go">Go-разработчик
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/java">Java-разработчик
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/python">Python-разработчик
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/qa-auto-engineer-java">Автоматизатор тестирования на Java
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/data-analytics">Аналитик данных
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/frontend">Фронтенд-разработчик
</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<button aria-haspopup class="btn nav-link" data-bs-toggle="dropdown" type="button">
О Хекслете
<span class="bi bi-chevron-down align-middle"></span>
</button>
<ul class="dropdown-menu bg-body">
<li>
<a class="dropdown-item py-2" href="/pages/about">О нас
</a></li>
<li>
<a class="dropdown-item py-2" href="/blog">Блог
</a></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/hse-research" role="button">Результаты (Исследование)
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://career.hexlet.io" role="button">Хекслет Карьера
</span></li>
<li>
<a class="dropdown-item py-2" href="/testimonials">Отзывы студентов
</a></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://t.me/hexlet_help_bot" role="button">Поддержка (В ТГ)
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/referal-program/?promo_creative=priglasite-druzei&promo_name=referal-program&promo_position=promo_position&promo_start=010724&promo_type=link" role="button">Реферальная программа
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/certificate" role="button">Подарочные сертификаты
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://hh.ru/employer/4307094" role="button">Вакансии
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://b2b.hexlet.io" data-target="_blank" role="button">Компаниям
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://hexly.ru/" data-target="_blank" role="button">Колледж
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://hexlyschool.ru/" data-target="_blank" role="button">Частная школа
</span></li>
</ul>
</li>
<li><a class="nav-link" href="/subscription/new">Подписка</a></li>
</ul>
<ul class="navbar-nav flex-lg-row align-items-lg-center gap-2 ms-auto">
<li>
<a class="nav-link" aria-label="Переключить тему" href="/theme/switch?new_theme=dark"><span aria-hidden="true" class="bi bi-moon"></span>
</a></li>
<li>
<span data-target="_self" class="nav-link external-link" data-href="/u/new" role="button"><span>Регистрация</span>
</span></li>
<li>
<span data-target="_self" class="nav-link external-link" data-href="https://ru.hexlet.io/session/new" role="button"><span>Вход</span>
</span></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="x-container-xxxl">
</div>
<main class="mb-6 min-vh-100 h-100">
<link rel="preload" as="image" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDAzNCwicHVyIjoiYmxvYl9pZCJ9fQ==--ba516ea9573bdfcd1d21e2aa0fff8818561828f2/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Typing-bro.png"/><link rel="preload" as="image" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDAwNCwicHVyIjoiYmxvYl9pZCJ9fQ==--43a2eb3595eeebb3357d478cbcb752d0026363de/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Website%20Creator-cuate.png"/><link rel="preload" as="image" href="/vite/assets/development-BVihs_d5.png"/><div id="app" data-page="{"component":"web/courses/lessons/theory_unit","props":{"errors":{},"locale":"ru","language":"ru","httpsHost":"https://ru.hexlet.io","host":"ru.hexlet.io","colorScheme":"light","auth":{"user":{"id":null,"last_viewed_notification_id":null,"email":null,"state":null,"first_name":"","last_name":"","created_at":"2026-02-26T17:26:12.122Z","current_program":null,"current_team":null,"full_name":"","guest":true,"can_use_paid_features":false,"is_hexlet_employee":false,"sanitized_phone_number":"","can_subscribe":true,"can_renew_education":false}},"cloudflareTurnstileSiteKey":"0x4AAAAAAA15KmeFXzd2H0Xo","vkIdClientId":"51586979","yandexIdClientId":"88d071f1d3384eb4bd1deb37910235c7","formAuthToken":"vAsfkdQa_CsCuMvsNzcNcOHeUq3Bxl-yqYZnzy2B7sJT2tSmJmRRS7T773Q7OP0HIdd_B8nxoRAUZv2bf4YJrA","topics":[{"id":60110,"title":"Немного смутило в тестах \"Где возможно использовать медиа-запросы?\" - в HTML - так-то можно если внутри тега style.","plain_title":"Немного смутило в тестах \"Где возможно использовать медиа-запросы?\" - в HTML - так-то можно если внутри тега style. ","creator":{"public_name":"Sergei Piadyshev","id":385840,"is_tutor":false},"comments":[{"creator":{"public_name":"Nikita Mikhaylov","id":186965,"is_tutor":true},"id":126957,"body":"Здравствуйте\n\nНу тут скорее получается внутри HTML файла, так как в теге `<style>` уже будет именно CSS","topic_id":60110}],"communitable":{"parent_entity_name":null,"parent_entity_url":null,"entity_name":"Медиа-запросы и другие устройства","entity_url":null,"active":true}},{"id":66955,"title":"Добрый день! Подскажите, пожалуйста, почему не работает тег body https://ru.hexlet.io/code_reviews/586054","plain_title":"Добрый день! Подскажите, пожалуйста, почему не работает тег body https://ru.hexlet.io/code_reviews/586054 ","creator":{"public_name":"Илья Шакшин","id":354585,"is_tutor":false},"comments":[{"creator":{"public_name":"Nikita Mikhaylov","id":186965,"is_tutor":true},"id":140497,"body":"Здравствуйте\n\nТут хитрая история направленная на изучение того, а как все файлы подключены и какие свойства есть. Обратите внимание, что в файле _app.css_ после подключения шрифтов для разных устройств есть свойства для `body`, в том числе и фон. То есть это значение перебивает то, которое вы установили в файле _terminal-print.css_. Но! Фон указан через переменную, а значит мы можем на него повлиять. Подумайте, как это можно сделать","topic_id":66955}],"communitable":{"parent_entity_name":null,"parent_entity_url":null,"entity_name":"Медиа-запросы и другие устройства","entity_url":null,"active":true}},{"id":82341,"title":"Здравствуйте!\n\nНадо подкорректирровать строгость тестов: забыл поменять хайлайты, а тест прошёл успешно.\n\n[https://ru.hexlet.io/code_reviews/868962](url)","plain_title":"Здравствуйте! Надо подкорректирровать строгость тестов: забыл поменять хайлайты, а тест прошёл успешно. https://ru.hexlet.io/code_reviews/868962 (url) ","creator":{"public_name":"Степан Карпинский","id":277358,"is_tutor":false},"comments":[{"creator":{"public_name":"Nikita Mikhaylov","id":186965,"is_tutor":true},"id":167693,"body":"Здравствуйте\n\nСделал тесты строже — спасибо! :)","topic_id":82341}],"communitable":{"parent_entity_name":null,"parent_entity_url":null,"entity_name":"Медиа-запросы и другие устройства","entity_url":null,"active":true}},{"id":75359,"title":"https://ide-css-adaptive-other-device-4065732.evaluator4-5.hexlet.io/?#\nВозникла проблема. Как изменить цвет фона за границами?","plain_title":"https://ide-css-adaptive-other-device-4065732.evaluator4-5.hexlet.io/?# Возникла проблема. Как изменить цвет фона за границами? ","creator":{"public_name":"Павел","id":501083,"is_tutor":false},"comments":[{"creator":{"public_name":"Nikita Mikhaylov","id":186965,"is_tutor":true},"id":157349,"body":"Тут, в основном нужно работать с переменными. Попробуйте подойти к решению задачи через изменение переменных. При этом селектор `.terminal` можно оставить с теми свойствами, которые есть","topic_id":75359},{"creator":{"public_name":"Konstantin Maishev","id":307794,"is_tutor":false},"id":164282,"body":"Спасибо, Никита, помогло!","topic_id":75359},{"creator":{"public_name":"Павел","id":501083,"is_tutor":false},"id":157316,"body":"https://ru.hexlet.io/code_reviews/723192","topic_id":75359},{"creator":{"public_name":"Nikita Mikhaylov","id":186965,"is_tutor":true},"id":157210,"body":"Здравствуйте\n\nЧтобы я мог увидеть ваше текущее решение пришлите, пожалуйста, ссылку на [сохранённое решение](https://help.hexlet.io/ru/articles/282174)","topic_id":75359}],"communitable":{"parent_entity_name":null,"parent_entity_url":null,"entity_name":"Медиа-запросы и другие устройства","entity_url":null,"active":true}},{"id":67537,"title":"Здравствуйте. Мы также учимся не только на решения учителя, а и на то, как написаны тесты.\n\nВторой тест, проверяет на самом деле не Print-результат а переиспользования :root чтобы проверить HTML-результат. А это значит:\n\n1. Неважно какие стили я внесу в @media print. Тест покажет ОК, только если root правильно переиспользовался, ведь тест проверяет не print-страницу а ее html-страницу.\n2. Если я напишу правильные стили, без переиспользования :root, тесты провалятся.\n3. На примере стиля border, можно не писать в @media print, так как он уже существует в html-версии, и тест пройдет, при условии, что :root - переиспользован. А по факту, на принт выведет без border.\n4. Даже с учительским вариантом решения задачи, print-страница выглядит по другому. Потому что, на принт не выводятся кнопки (три круглых кнопки сверху слева)\n\n\n\nПо факту мы проверяем html - страницу.\n\nНасколько такие тесты являются корректными, если к примеру меня спросят, почему я так написал в каком-то проекте тест, как я могу объяснить?","plain_title":"Здравствуйте. Мы также учимся не только на решения учителя, а и на то, как написаны тесты. Второй тест, проверяет на самом деле не Print-результат а переиспользования :root чтобы проверить HTML-результат. А это значит: Неважно какие стили я внесу в @media print. Тест покажет ОК, только если root правильно переиспользовался, ведь тест проверяет не print-страницу а ее html-страницу. Если я напишу правильные стили, без переиспользования :root, тесты провалятся. На примере стиля border, можно не писать в @media print, так как он уже существует в html-версии, и тест пройдет, при условии, что :root - переиспользован. А по факту, на принт выведет без border. Даже с учительским вариантом решения задачи, print-страница выглядит по другому. Потому что, на принт не выводятся кнопки (три круглых кнопки сверху слева) https://cdn2.hexlet.io/store/derivatives/original/727de0000367e04e94df644da7d17792.png По факту мы проверяем html - страницу. Насколько такие тесты являются корректными, если к примеру меня спросят, почему я так написал в каком-то проекте тест, как я могу объяснить? ","creator":{"public_name":"Oo11o","id":414463,"is_tutor":false},"comments":[{"creator":{"public_name":"Oo11o","id":414463,"is_tutor":false},"id":141663,"body":"**Nikita Mikhaylov**, \n\n> Тесты эмулируют поведение устройства. Если вы посмотрите на тесты...\n\nВот тут у меня и недопонимания, я полагаю, что тесты сравнивают не с @media print, а страничку html.\n\nЕсли написать стили для media print без использования переменных(:root), тесты не пройдут. Вот пример сss:\n\n```\n/* BEGIN (write your solution here) */\n@media print {\n .terminal {\n background-color: #fff;\n color: #000;\n border: 1px solid #000;\n }\n \n .code-tag {\n color: #c62828;\n }\n\n .code-attr {\n color: #2e7d32\n }\n\n .code-string {\n color: #2e7d32;\n }\n}\n\n/* END */\n\n```\n\nА вот то, что тесты покажут (принт страница с такими стилями не будет так выглядеть, можно проверить нажав Ctrl+P ): \n\nTerminal-Component-Page-with-a-viewport-of-800px-Print-version-1-actual.jpg\n\n\n\n","topic_id":67537},{"creator":{"public_name":"Nikita Mikhaylov","id":186965,"is_tutor":true},"id":141616,"body":"Здравствуйте\n\nПройдёмся по пунктам :) \n\n> Неважно какие стили я внесу в @media print. Тест покажет ОК, только если root правильно переиспользовался, ведь тест проверяет не print-страницу а ее html-страницу.\n\nТесты эмулируют поведение устройства. Если вы посмотрите на тесты, то там есть такая строчка:\n\n```javascript\nawait page.emulateMedia({ media: 'print' });\n```\n\nЕсли интересно, то вот [документация](https://playwright.dev/docs/api/class-page#page-emulate-media). То есть мы эмулируем поведение `print` и уже тогда снимаем скриншот. Тестам всё равно на сам CSS и HTML. Он тестирует конечный результат, то есть вывод в браузер\n\n> Если я напишу правильные стили, без переиспользования :root, тесты провалятся\n\nА здесь чуть хитрее. Проваляться они не из-за этого, а из-за каскадности. Ведь после подключения всех CSS файлов, в файле `app.css` есть свои стили, которые используют переменные. Не указав переменную `--main-bg` она будет взята из файла для обычной версии\n\n> На примере стиля border, можно не писать в @media print, так как он уже существует в html-версии, и тест пройдет, при условии, что :root - переиспользован. А по факту, на принт выведет без border.\n\nА вот тут соглашусь, но это просто попадание в допуски. Ужесточу тесты, тогда это будет обязательным (это снова возвращение к тому, что тестируется именно вывод в браузер)\n\n> Даже с учительским вариантом решения задачи, print-страница выглядит по другому. Потому что, на принт не выводятся кнопки (три круглых кнопки сверху слева)\n\nА вот это странно. Перепроверил — всё выводится. Мы же HTML не затрагиваем и кнопки в белый не перекрашиваем. Можно чуть конкретнее кейс описать?\n\n> По факту мы проверяем html - страницу\n\nКак уже писал выше — мы проверяем конечный вывод на страницу. Именно визуальную часть. Чисто теоретически можно прям в упражнении сделать новую структуру и убрать использование переменных. Тесты не будут проверять соответствие изначальной и конечной вёрстки. Можете попробовать отредактировать HTML и увидите, что тесты на это не отреагируют","topic_id":67537},{"creator":{"public_name":"Nikita Mikhaylov","id":186965,"is_tutor":true},"id":141743,"body":"А, теперь понял\n\n> принт страница с такими стилями не будет так выглядеть, можно проверить нажав Ctrl+P \n\nНа самом деле брузер будет отображать, но, по умолчанию они выключают настройку с рендером фонового цвета. Так как, зачастую, при печати это не требуется. Вот можете здесь щёлкнуть и увидеть вместе со всеми цветами https://disk.yandex.ru/i/2Flak06J-ocxwA\n\nЭто как с колонтитулами: по умолчанию они есть, хотя в тестах их и нет. Просто настройки браузера по умолчанию. Собственно если вы включите (или посмотрите через DevTools), то увидите, почему тесты не пройдут при вашем варианте. И дело в переменной `--main-bg`, как уже говорил в прошлом сообщении","topic_id":67537}],"communitable":{"parent_entity_name":null,"parent_entity_url":null,"entity_name":"Медиа-запросы и другие устройства","entity_url":null,"active":true}},{"id":67678,"title":"Привет) А напомните пожалуйста где мы проходили чтобы подключать файлы стилей через @import ?\n\nА еще такой вопрос, когда я делала проект \"Когнитивные искажения\" чтобы не запутываться в стилях сначала разбила стили для разных секций в разные css-файлы , они были подключены через link. В первом из этих файлов были объявлены переменные, но потом когда в других файлах я эти переменные пыталась использовать они не работали... не подскажете почему могло быть такое поведение? Хотя в данном задании переменные объявлены и используются в разных файлах и только подключение разное... и вообще какой метод подключения стоит выбирать если несколько файлов css, через link или @import?","plain_title":"Привет) А напомните пожалуйста где мы проходили чтобы подключать файлы стилей через @import ? ","creator":{"public_name":"Валентина","id":273986,"is_tutor":false},"comments":[{"creator":{"public_name":"Nikita Mikhaylov","id":186965,"is_tutor":true},"id":142011,"body":"Здравствуйте\n\n> А напомните пожалуйста где мы проходили чтобы подключать файлы стилей через @import ?\n\nОй, про это действительно было, а потом пропало. Посмотрю, куда добавить пояснения — спасибо!\n\n> В первом из этих файлов были объявлены переменные, но потом когда в других файлах я эти переменные пыталась использовать они не работали... не подскажете почему могло быть такое поведение?\n\nТочно файл был самым первым и переменные были объявлены внутри `:root`?\n\n> и вообще какой метод подключения стоит выбирать если несколько файлов css, через link или @import?\n\nНа самом деле и тот и тот способ влечёт за собой примерно похожие действия со стороны браузера. Поэтому лучшего варианта нет. Тут есть ещё одна причина — в больших проектах, в конечном счёте, всё собирается внутри одного файла, так как `link` и `@import` генерируют разные подключения в браузере, что не очень хорошо. Так что тут скорее стоит выбирать между подключением единого файла и его сегментов. А тут жизнь распорядилась так, что подключение одного файла лучше. Просто сам файл может меняться в зависимости от страницы и устройства","topic_id":67678}],"communitable":{"parent_entity_name":null,"parent_entity_url":null,"entity_name":"Медиа-запросы и другие устройства","entity_url":null,"active":true}},{"id":62743,"title":"Добрый день!\nПодскажите пожалуйста в чем ошибка\n\nкод ревью\nhttps://ru.hexlet.io/code_reviews/521336","plain_title":"Добрый день! Подскажите пожалуйста в чем ошибка код ревью https://ru.hexlet.io/code_reviews/521336 ","creator":{"public_name":"Татьяна Чернышова","id":309206,"is_tutor":false},"comments":[{"creator":{"public_name":"Татьяна Чернышова","id":309206,"is_tutor":false},"id":132180,"body":"**Nikita Mikhaylov**, спасибо большое за помощь","topic_id":62743},{"creator":{"public_name":"Nikita Mikhaylov","id":186965,"is_tutor":true},"id":132165,"body":"Здравствуйте\n\nОбратите тут внимание, что вы заменили переменные для всех устройств сразу. Мы хотим изменить их только для версии «для печати». Значит нужен будет медиазапрос, а уже внутри него то решение, которое вы указали","topic_id":62743}],"communitable":{"parent_entity_name":null,"parent_entity_url":null,"entity_name":"Медиа-запросы и другие устройства","entity_url":null,"active":true}},{"id":63519,"title":"Странный title у тестовой страницы ` <title>Статьи про UX/UI</title>`","plain_title":"Странный title у тестовой страницы <title>Статьи про UX/UI</title> ","creator":{"public_name":"Александр Кремнёв","id":261661,"is_tutor":false},"comments":[{"creator":{"public_name":"Nikita Mikhaylov","id":186965,"is_tutor":true},"id":133826,"body":"Здравствуйте\n\nДействительно, случайно скопировал из другого упражнения :) Спасибо, поправил!","topic_id":63519}],"communitable":{"parent_entity_name":null,"parent_entity_url":null,"entity_name":"Медиа-запросы и другие устройства","entity_url":null,"active":true}},{"id":50684,"title":"Не совсем понял разницу между _**aspect-ratio**_ и _**device-aspect-ratio**_. Разве _viewport_ не равен разрешению устройства?\n","plain_title":"Не совсем понял разницу между aspect-ratio и device-aspect-ratio. Разве viewport не равен разрешению устройства? ","creator":{"public_name":"Дмитрий Епихин","id":257873,"is_tutor":false},"comments":[{"creator":{"public_name":"Nikita Mikhaylov","id":186965,"is_tutor":true},"id":108475,"body":"Здравствуйте\n\nВ теории не всегда. Ведь мы сами можем задать размер viewport. И его соотношение сторон может отличаться от соотношения самого устройства. Но с таким, лично я, не сталкивался :)","topic_id":50684},{"creator":{"public_name":"Валерий С","id":136094,"is_tutor":false},"id":125992,"body":"Попробовал эти характеристики, но не работают, хотя в настройках экрана указано это самое соотношение: https://prnt.sc/220pvgh\n> \n@media (device-aspect-ratio: 1140/900) , (aspect-ratio: 1140/900) {","topic_id":50684}],"communitable":{"parent_entity_name":null,"parent_entity_url":null,"entity_name":"Медиа-запросы и другие устройства","entity_url":null,"active":true}},{"id":61113,"title":"Здравствуйте!\nУсловия задачи требуют, чтобы фон страницы изменился, но в тестовых снимках фиолетовый цвет фона страницы остается в обоих вариантах. Тесты проходят даже без его изменения.\nА как раз это не получается :))\n\nПробую изменить фоны экрана и терминала таким образом:\nhttps://ru.hexlet.io/code_reviews/498668\nт.е. определяю новую переменную --print-bg и в стилях для печати устанавливаю ее в background для body и для .terminal.\nДля фона терминала работает, для фона body не работает, в ChromeDevTools видим:\n\n> @media print\nbody {\n background: var(--print-bg);\n}\n\nправило background зачеркнуто, т.е. не не переопределено. Подскажите, кто знает? :)","plain_title":"Здравствуйте! Условия задачи требуют, чтобы фон страницы изменился, но в тестовых снимках фиолетовый цвет остается в обоих вариантах. Тесты проходят даже без изменения фона страницы. А это не получается :)) Пробую изменить фоны экрана и терминала таким образом: https://ru.hexlet.io/code_reviews/498668 т.е. определяю новую переменную ----print-bg и в стилях для печати устанавливаю ее в background для body и для .terminal. Для фона терминала работает, для фона body не работает, в ChromeDevTools видим: @media print body { background: var(--print-bg); } правило background зачеркнуто, т.е. не не переопределено. Подскажите, кто знает? :) ","creator":{"public_name":"Виктор Ш","id":190978,"is_tutor":false},"comments":[{"creator":{"public_name":"Nikita Mikhaylov","id":186965,"is_tutor":true},"id":129213,"body":"Тут дело в том, что все указания `@import` обязаны быть вначале файла. Так требует стандарт. Если браузер встречает такие инструкции в середине файла, то автоматически переносит их в начало","topic_id":61113},{"creator":{"public_name":"Nikita Mikhaylov","id":186965,"is_tutor":true},"id":128951,"body":"Здравствуйте\n\nВы используете переменные `--print-bg`, `--print-tag` и так далее, но в вашем решении не видно, где и для чего определяются данные переменные","topic_id":61113},{"creator":{"public_name":"Виктор Ш","id":190978,"is_tutor":false},"id":129046,"body":"Никита, благодарю за подробные разъяснения!\n\nХочу уточнить вот что. Просто чтобы лучше понять механизм каскадности стилей. Указываю инструкцию `@import url(\"./terminal-print.css\");` в конце файла app.css, после того, как стиль для body был задан.\n\n```\n@font-face {\n font-weight: 400;\n font-family: \"JetBrains Mono\";\n src: url(\"../assets/fonts/JetBrainsMono-Regular.woff2\") format(\"woff2\");\n}\n\nbody {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100vh;\n margin: 0;\n\n background: var(--main-bg);\n}\n\n@import url(\"./variables.css\");\n@import url(\"./terminal-screen.css\");\n@import url(\"./terminal-print.css\");\n\n```\nНо все равно переопределения стиля body не происходит. Получается, место подключения стилей (в начале файла или в конце) не имеет значения?","topic_id":61113},{"creator":{"public_name":"Nikita Mikhaylov","id":186965,"is_tutor":true},"id":129042,"body":"Здесь стоит проанализировать то, как устроены файлы. Обратите внимание, что стили для `<body>` указываются уже после подключений файлов стилей для печати. Следовательно, по всем правилам каскадности, они перезапишут старые правила.\n\nИменно в этом часть интереса всего упражнения. Подумайте, если создание новых переменных не сработало, то, возможно, стоит не создавать новые переменные, а перезаписать их в стилях для печати","topic_id":61113},{"creator":{"public_name":"Виктор Ш","id":190978,"is_tutor":false},"id":128975,"body":"Я определяю переменные в файле variables.css (он не попадает в review):\n```\n:root {\n --main-bg: #7e57c2;\n --print-bg: #fff;\n --terminal-bg: #263238;\n --red: #ff5f56;\n --yellow: #ffbd2e;\n --green: #27c93f;\n --highlight-tag: #ff5370;\n --print-tag: #c62828;\n --highlight-attr: #ffcb6b;\n --print-attr: #2e7d32;\n --highlight-string: #c3e88d;\n --print-str: #2e7d32;\n}\n```\nТаким образом, например, есть переменная main-bg для стилей экрана и переменная print-bg для стилей печати.\nИ для фона терминала такое работает, а для фона экрана не работает","topic_id":61113}],"communitable":{"parent_entity_name":null,"parent_entity_url":null,"entity_name":"Медиа-запросы и другие устройства","entity_url":null,"active":true}}],"lesson":{"exercise":{"id":1597,"slug":"css_adaptive_other_device_exercise","name":null,"state":"active","kind":"exercise","language":"html","locale":"ru","has_web_view":true,"has_test_view":false,"reviewable":true,"readme":"Создайте версию терминала для печати на принтере. В отличие от множества экранов, для печати стараются делать минималистичный дизайн с простыми цветами и отсутствием фона. Сейчас уже свёрстан терминал для вывода на экраны устройств.\n\nОсновные цвета находятся в файле `variables.css`. Этот файл является единым для всех версий, поэтому вы можете перезаписать переменные по необходимости\n\nВ чём различия обычной версии и версии для печати. Опишем стили для вывода на печать:\n\n* Фон страницы: `#fff`\n* Фон терминала: отсутствует или `#fff`\n* У терминала появляется сплошная граница шириной в _1px_ и цветом `#000`\n* Основной цвет текста в терминале: `#000`\n* Так же меняются цвета выделения тегов, атрибутов и их значений. Это связано с изменением контраста фона и цветом этих элементов:\n * Цвет тега: `#c62828`\n * Цвет атрибута: `#936315`\n * Цвет значения атрибута: `#2e7d32`\n\nПосле применения всех действий терминал для печати будет выглядеть так:\n\n\n\n## Как проверять стили для печати\n\nЕсли вы используете Chrome DevTools, то вам доступен режим эмуляции различных _media type_. Чтобы его включить:\n\n1. Откройте DevTools\n2. Воспользуйтесь комбинацией <kbd>Ctrl + Shift + P</kbd>\n3. Выберите пункт _Show Rendering_\n4. В появившейся вкладке меняйте значение поля _Emulate CSS media type_\n\n\n","prepared_readme":"Создайте версию терминала для печати на принтере. В отличие от множества экранов, для печати стараются делать минималистичный дизайн с простыми цветами и отсутствием фона. Сейчас уже свёрстан терминал для вывода на экраны устройств.\n\nОсновные цвета находятся в файле `variables.css`. Этот файл является единым для всех версий, поэтому вы можете перезаписать переменные по необходимости\n\nВ чём различия обычной версии и версии для печати. Опишем стили для вывода на печать:\n\n* Фон страницы: `#fff`\n* Фон терминала: отсутствует или `#fff`\n* У терминала появляется сплошная граница шириной в _1px_ и цветом `#000`\n* Основной цвет текста в терминале: `#000`\n* Так же меняются цвета выделения тегов, атрибутов и их значений. Это связано с изменением контраста фона и цветом этих элементов:\n * Цвет тега: `#c62828`\n * Цвет атрибута: `#936315`\n * Цвет значения атрибута: `#2e7d32`\n\nПосле применения всех действий терминал для печати будет выглядеть так:\n\n\n\n## Как проверять стили для печати\n\nЕсли вы используете Chrome DevTools, то вам доступен режим эмуляции различных _media type_. Чтобы его включить:\n\n1. Откройте DevTools\n2. Воспользуйтесь комбинацией <kbd>Ctrl + Shift + P</kbd>\n3. Выберите пункт _Show Rendering_\n4. В появившейся вкладке меняйте значение поля _Emulate CSS media type_\n\n\n","has_solution":true,"entity_name":"Медиа-запросы и другие устройства"},"units":[{"id":3623,"name":"theory","url":"/courses/css-adaptive/lessons/other-device/theory_unit"},{"id":3998,"name":"quiz","url":"/courses/css-adaptive/lessons/other-device/quiz_unit"},{"id":5160,"name":"exercise","url":"/courses/css-adaptive/lessons/other-device/exercise_unit"}],"links":[{"id":424682,"name":"Медиа-запросы. Стандарт W3C","url":"https://www.w3.org/TR/css3-mediaqueries/"},{"id":424683,"name":"Поддержка характеристик браузерами","url":"https://caniuse.com/#search=media%20feature"}],"ordered_units":[{"id":3623,"name":"theory","url":"/courses/css-adaptive/lessons/other-device/theory_unit"},{"id":3998,"name":"quiz","url":"/courses/css-adaptive/lessons/other-device/quiz_unit"},{"id":5160,"name":"exercise","url":"/courses/css-adaptive/lessons/other-device/exercise_unit"}],"id":1688,"slug":"other-device","state":"approved","name":"Медиа-запросы и другие устройства","course_order":600,"goal":"Выясняем, для каких устройств возможно применять свои стили","self_study":"Создайте любую страницу на компьютере и попробуйте добавить все характеристики в условие медиа-запроса так, чтобы стили сработали на вашем компьютере.\n","theory_video_provider":null,"theory_video_uid":null,"theory":"Медиа-запросы в качестве условия позволяют не только выставлять ширину/высоту и ориентацию экрана, но и более конкретно указывать устройство, для которого будут применены стили.\n\nВ стандарте CSS3 определены 4 основных типа устройств, которые возможно указать в качестве условия медиа-запроса:\n\n* `all` — все доступные устройства. Этот тип используется по умолчанию, поэтому указывать его не обязательно.\n* `print` — принтеры. Эти стили используются при печати веб-страницы. Отдельный CSS для печати очень востребован при создании интернет-магазинов, так как пользователи зачастую распечатывают страницу с нужным им товаром.\n* `screen` — все экраны различных устройств. Сюда входят как дисплеи холодильников, так и 4К-мониторы.\n* `speech` — скринридеры. Это программное обеспечение для чтения текста, помогающие незрячим людям воспринимать информацию на странице.\n\n```html\n<style>\n /* Стили сайта */\n\n @media print {\n /* Стили для вывода страницы на печать */\n }\n\n @media speech {\n /* Стили для скринридеров */\n }\n</style>\n```\n\nТак же, как и с остальными медиа-запросами, тип устройства можно указывать при подключении CSS-файла:\n\n```html\n<!DOCTYPE html>\n<html lang=\"ru\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Подключение CSS-файлов</title>\n\n <!-- Общие стили для проекта -->\n <link rel=\"stylesheet\" href=\"style.css\">\n\n <!-- Стили вывода страницы на печать -->\n <link rel=\"stylesheet\" media=\"print\" href=\"print.css\">\n\n</head>\n<body>\n <!-- Разметка проекта -->\n</body>\n</html>\n```\n\nПомимо указания конкретного типа устройства, CSS позволяет указывать и особые характеристики устройства, для которого необходимо применить стили. Основными характеристиками, которые поддерживают большинство браузеров, являются:\n\n* `color`. Количество бит цвета, которое способно воспроизвести устройство. Если значение не указано, то проверяется, что устройство может воспроизводить цвет.\n* `monochrome`. Монохромность устройства. Устройство является монохромным, если может воспроизводить только два основных цвета — чёрный и белый, а также их оттенки. Такими устройствами являются некоторые электронные книги.\n* `orientation`. Ориентация устройства. Подробнее эта характеристика была рассмотрена в прошлом уроке.\n* `aspect-ratio`. Характеристика, показывающая соотношение сторон _viewport_. Например _16/9_ или _4/3_. Если разрешение _viewport_ равняется 1280x720, то `aspect-ratio` может принимать любые кратные этому разрешению числа, чтобы применились стили для данного разрешения. Например, можно указать _16/9_, _32/18_, _1280/720_ и даже _2560/1440_.\n\n\n\n\n```html\n<style>\n /* Стили сайта */\n\n @media (color) {\n /* Стили для цветных устройств */\n }\n\n @media (aspect-ratio: 16/9) {\n /* Стили страницы с соотношением 16 к 9 */\n }\n</style>\n```\n"},"lessonMember":null,"courseMember":null,"course":{"start_lesson":{"exercise":null,"units":[{"id":3549,"name":"theory","url":"/courses/css-adaptive/lessons/intro/theory_unit"}],"links":[],"ordered_units":[{"id":3549,"name":"theory","url":"/courses/css-adaptive/lessons/intro/theory_unit"}],"id":1664,"slug":"intro","state":"approved","name":"Введение","course_order":100,"goal":"Знакомимся с темой и целями курса","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"Адаптивная вёрстка — неотъемлемая часть современной разработки. При создании адаптивной вёрстки мы меняем дизайн страницы в зависимости от поведения пользователя, размеров экрана, ориентации устройства.\n\nРанее для создания мобильной версии сайта использовали отдельный шаблон, который зачастую подгружался с поддомена. Данное решение было сложным с точки зрения поддержки сайта, ведь для создания/удаления новых блоков приходилось выполнять двойную работу: для основного сайта и для его мобильной версии. В настоящее время мы можем существенно экономить время и не отдавать пользователю новый макет, а изменять текущий.\n\nВ этом курсе будут рассмотрены стандартные практики по созданию адаптивных сайтов:\n\n* гибкие элементы;\n* использование возможностей _Flex_;\n* использование **media**-запросов _CSS_;\n* создание _контрольных точек (breakpoint)_.\n\n## Адаптивная вёрстка\n\nВ этом введении сразу хочется расставить некие акценты, с которыми нам будет проще в изучении темы. Разделение понятий адаптивной и резиновой вёрстки остались в прошлом, когда в моде были разделения по конкретным разрешениям экрана и полное изменение CSS в зависимости от этого. Многообразие различных устройств в современном мире слишком большое, чтобы можно было выбрать 3-5 конкретных разрешений и верстать под них. Необходимо брать максимально много из всех подходов, чтобы, в конечном итоге, получить макет, который будет отображаться хорошо на любых устройствах при любых разрешениях.\n\nВ рамках курса все подходы будут сложены в одно понятие — _адаптивная вёрстка_.\n\n## Практика\n\nМногие из уроков в данном курсе будут иметь практики с возможностью перехода в веб-доступ. Старайтесь не просто выполнять задание, а после успешного прохождения также экспериментируйте с кодом и возможностями, которые вы узнали.\n\nПрактики в этом курсе построены по системе тестирования скриншотов. В отличие от других курсов, здесь идёт проверка не по значениям, которые вы указываете, а делается скриншот страницы с вашими стилями и сравнивается со скриншотами решения учителя. Вы можете легко увидеть, как должна выглядеть страница при разных разрешениях _viewport_.\n\nПосмотреть скриншоты со стилями из решения учителя вы можете в директории \\_\\_tests__/__image_snapshots\\_\\_.\n\n## Инструменты разработчика\n\nКаждый современный браузер имеет специальный инструментарий разработчика. В браузере _Google Chrome_ его можно вызвать, используя контекстное меню, в котором есть пункт _Inspect_, либо воспользоваться комбинацией <kbd>Ctrl+ Shift+I</kbd> (<kbd>Command+Option+I</kbd> на Маке). В этой панели нас интересует кнопка _Toggle Device Toolbar_. Это вызовет специальный вид браузера, внутри которого можно указывать разрешение экрана и проверять вёрстку сайта.\n\n* [Описание режима эмуляции мобильных устройств в Google Chrome](https://developers.google.com/web/tools/chrome-devtools/device-mode)\n* [Описание режима эмуляции мобильных устройств в Firefox](https://developer.mozilla.org/ru/docs/Tools/Responsive_Design_View)\n* [Описание режима эмуляции мобильных устройств в Safari](https://developer.apple.com/safari/tools/)\n"},"id":204,"slug":"css-adaptive","challenges_count":3,"name":"CSS: Адаптивность сайта","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"paid","description":"На этом курсе вы изучите адаптивность страниц. Вы узнаете больше о способах адаптировать сайт под разные устройства. В итоге вы научитесь использовать резиновую верстку, флекс и медиа-запросы. Адаптивность пригодится, если вы решите создать свою страницу, так как пользователи смотрят на страницы с разных устройств. Знания из этого курса помогают программистам создавать сайты под разные устройства и разрешения экранов.","kind":"basic","updated_at":"2026-01-20T11:48:00.277Z","language":"html","duration_cache":22080,"skills":["Проверять адаптивность сайта, используя онлайн-инструменты.","Использовать единицу измерения проценты для создания гибких макетов.","Работать с Flex при создании адаптивных макетов.","Создавать медиа-запросы, позволяющие использовать стили для разных разрешений экранов.","Работать с различными типами устройств и создавать стили под них."],"keywords":["CSS3","Flex","Viewport","Адаптивность","Гибкие макеты","Media Queries"],"lessons_count":7,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6Nzk4NCwicHVyIjoiYmxvYl9pZCJ9fQ==--e43a5d53e15ef8c4c0d807fc4e8883a04bfbe176/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"recommendedLandings":[{"stack":{"id":19,"slug":"layout-designer","title":"Профессиональная верстка","audience":"for_beginners","start_type":"anytime","pricing_model":"purchase","priority":"medium","kind":"track","state":"published","stack_state":"finished","order":1700,"duration_in_months":5},"id":26,"slug":"professional-layout","title":"Профессиональная верстка","subtitle":"Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях","subtitle_for_lists":"Адаптивная вёрстка для отображения на любых устройствах ","locale":"ru","current":true,"duration_in_months_text":"5 месяцев","stack_slug":"layout-designer","price_text":"от 3 900 ₽","duration_text":"5 месяцев","cover_list_variant":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDAzNCwicHVyIjoiYmxvYl9pZCJ9fQ==--ba516ea9573bdfcd1d21e2aa0fff8818561828f2/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Typing-bro.png"},{"stack":{"id":41,"slug":"layout-designer-positioning","title":"Позиционирование в CSS","audience":"for_programmers","start_type":"anytime","pricing_model":"subscription","priority":"medium","kind":"track","state":"published","stack_state":"finished","order":4800,"duration_in_months":1},"id":70,"slug":"layout-designer-positioning","title":"Позиционирование в CSS","subtitle":"Навык разработки адаптивных интерфейсов, позволяющий создавать удобные и функциональные решения для различных устройств","subtitle_for_lists":"Получите навык работы с CSS и адаптивными интерфейсами","locale":"ru","current":true,"duration_in_months_text":"1 месяц","stack_slug":"layout-designer-positioning","price_text":"от 3 900 ₽","duration_text":"1 месяц","cover_list_variant":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDAwNCwicHVyIjoiYmxvYl9pZCJ9fQ==--43a2eb3595eeebb3357d478cbcb752d0026363de/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Website%20Creator-cuate.png"}],"lessonMemberUnit":null,"accessToLearnUnitExists":false,"accessToCourseExists":false},"url":"/courses/css-adaptive/lessons/other-device/theory_unit","version":"0b0c6d4ebbd40fd58630a0dd89cc25544ccdf24e","encryptHistory":false,"clearHistory":false}"><style data-mantine-styles="true">:root, :host{--mantine-font-family: Arial, sans-serif;--mantine-font-family-headings: Arial, sans-serif;--mantine-heading-font-weight: normal;--mantine-radius-default: 0rem;--mantine-primary-color-filled: var(--mantine-color-indigo-filled);--mantine-primary-color-filled-hover: var(--mantine-color-indigo-filled-hover);--mantine-primary-color-light: var(--mantine-color-indigo-light);--mantine-primary-color-light-hover: var(--mantine-color-indigo-light-hover);--mantine-primary-color-light-color: var(--mantine-color-indigo-light-color);--mantine-spacing-xxl: calc(4rem * var(--mantine-scale));--mantine-font-size-xs: 12px;--mantine-font-size-sm: 14px;--mantine-font-size-md: 16px;--mantine-font-size-lg: clamp(16.0000px, calc(15.2727px + 0.2273vw), 18.0000px);--mantine-font-size-xl: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-font-size-display-3: clamp(32.0000px, calc(26.1818px + 1.8182vw), 48.0000px);--mantine-font-size-display-2: clamp(36.0000px, calc(25.8182px + 3.1818vw), 64.0000px);--mantine-font-size-display-1: clamp(40.0000px, calc(25.4545px + 4.5455vw), 80.0000px);--mantine-font-size-h1: clamp(28.0000px, calc(23.6364px + 1.3636vw), 40.0000px);--mantine-font-size-h2: clamp(24.0000px, calc(21.0909px + 0.9091vw), 32.0000px);--mantine-font-size-h3: clamp(20.0000px, calc(17.0909px + 0.9091vw), 28.0000px);--mantine-font-size-h4: clamp(16.0000px, calc(13.0909px + 0.9091vw), 24.0000px);--mantine-font-size-h5: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-font-size-h6: 1rem;--mantine-primary-color-0: var(--mantine-color-indigo-0);--mantine-primary-color-1: var(--mantine-color-indigo-1);--mantine-primary-color-2: var(--mantine-color-indigo-2);--mantine-primary-color-3: var(--mantine-color-indigo-3);--mantine-primary-color-4: var(--mantine-color-indigo-4);--mantine-primary-color-5: var(--mantine-color-indigo-5);--mantine-primary-color-6: var(--mantine-color-indigo-6);--mantine-primary-color-7: var(--mantine-color-indigo-7);--mantine-primary-color-8: var(--mantine-color-indigo-8);--mantine-primary-color-9: var(--mantine-color-indigo-9);--mantine-color-red-0: #ffeaea;--mantine-color-red-1: #fed4d4;--mantine-color-red-2: #f4a7a8;--mantine-color-red-3: #ec7878;--mantine-color-red-4: #e55050;--mantine-color-red-5: #e03131;--mantine-color-red-6: #e02829;--mantine-color-red-7: #c71a1c;--mantine-color-red-8: #b21218;--mantine-color-red-9: #9c0411;--mantine-color-violet-0: #fce9ff;--mantine-color-violet-1: #f1cfff;--mantine-color-violet-2: #e09bff;--mantine-color-violet-3: #d16fff;--mantine-color-violet-4: #be37fe;--mantine-color-violet-5: #b51afe;--mantine-color-violet-6: #b009ff;--mantine-color-violet-7: #9b00e4;--mantine-color-violet-8: #8a00cc;--mantine-color-violet-9: #7800b3;--mantine-color-indigo-0: #edecff;--mantine-color-indigo-1: #d6d5fe;--mantine-color-indigo-2: #aaa9f4;--mantine-color-indigo-3: #7b79eb;--mantine-color-indigo-4: #5451e4;--mantine-color-indigo-5: #3b37e0;--mantine-color-indigo-6: #2d2adf;--mantine-color-indigo-7: #1f1ec7;--mantine-color-indigo-8: #1819b2;--mantine-color-indigo-9: #0c149e;--mantine-color-cyan-0: #dffdff;--mantine-color-cyan-1: #caf5ff;--mantine-color-cyan-2: #99e8ff;--mantine-color-cyan-3: #64daff;--mantine-color-cyan-4: #3ccffe;--mantine-color-cyan-5: #24c8fe;--mantine-color-cyan-6: #00c2ff;--mantine-color-cyan-7: #00ade4;--mantine-color-cyan-8: #009acd;--mantine-color-cyan-9: #0085b5;--mantine-color-green-0: #e9fdec;--mantine-color-green-1: #d7f6dc;--mantine-color-green-2: #b0eab9;--mantine-color-green-3: #86df94;--mantine-color-green-4: #62d574;--mantine-color-green-5: #4ccf5f;--mantine-color-green-6: #3fcc54;--mantine-color-green-7: #2fb344;--mantine-color-green-8: #25a03b;--mantine-color-green-9: #138a2e;--mantine-color-yellow-0: #fff7e2;--mantine-color-yellow-1: #ffeecd;--mantine-color-yellow-2: #ffdc9c;--mantine-color-yellow-3: #ffc966;--mantine-color-yellow-4: #feb93a;--mantine-color-yellow-5: #feae1e;--mantine-color-yellow-6: #ffa90f;--mantine-color-yellow-8: #ca8200;--mantine-color-yellow-9: #af7000;--mantine-h1-font-size: clamp(28.0000px, calc(23.6364px + 1.3636vw), 40.0000px);--mantine-h1-font-weight: normal;--mantine-h2-font-size: clamp(24.0000px, calc(21.0909px + 0.9091vw), 32.0000px);--mantine-h2-font-weight: normal;--mantine-h3-font-size: clamp(20.0000px, calc(17.0909px + 0.9091vw), 28.0000px);--mantine-h3-font-weight: normal;--mantine-h4-font-size: clamp(16.0000px, calc(13.0909px + 0.9091vw), 24.0000px);--mantine-h4-font-weight: normal;--mantine-h5-font-size: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-h5-font-weight: normal;--mantine-h6-font-size: 1rem;--mantine-h6-font-weight: normal;}
:root[data-mantine-color-scheme="dark"], :host([data-mantine-color-scheme="dark"]){--mantine-color-anchor: var(--mantine-color-text);--mantine-color-dimmed: #495057;--mantine-color-dark-filled: var(--mantine-color-dark-5);--mantine-color-dark-filled-hover: var(--mantine-color-dark-6);--mantine-color-dark-light: rgba(105, 105, 105, 0.15);--mantine-color-dark-light-hover: rgba(105, 105, 105, 0.2);--mantine-color-dark-light-color: var(--mantine-color-dark-0);--mantine-color-dark-outline: var(--mantine-color-dark-1);--mantine-color-dark-outline-hover: rgba(184, 184, 184, 0.05);--mantine-color-gray-filled: var(--mantine-color-gray-5);--mantine-color-gray-filled-hover: var(--mantine-color-gray-6);--mantine-color-gray-light: rgba(222, 226, 230, 0.15);--mantine-color-gray-light-hover: rgba(222, 226, 230, 0.2);--mantine-color-gray-light-color: var(--mantine-color-gray-0);--mantine-color-gray-outline: var(--mantine-color-gray-1);--mantine-color-gray-outline-hover: rgba(241, 243, 245, 0.05);--mantine-color-red-filled: var(--mantine-color-red-5);--mantine-color-red-filled-hover: var(--mantine-color-red-6);--mantine-color-red-light: rgba(236, 120, 120, 0.15);--mantine-color-red-light-hover: rgba(236, 120, 120, 0.2);--mantine-color-red-light-color: var(--mantine-color-red-0);--mantine-color-red-outline: var(--mantine-color-red-1);--mantine-color-red-outline-hover: rgba(254, 212, 212, 0.05);--mantine-color-pink-filled: var(--mantine-color-pink-5);--mantine-color-pink-filled-hover: var(--mantine-color-pink-6);--mantine-color-pink-light: rgba(250, 162, 193, 0.15);--mantine-color-pink-light-hover: rgba(250, 162, 193, 0.2);--mantine-color-pink-light-color: var(--mantine-color-pink-0);--mantine-color-pink-outline: var(--mantine-color-pink-1);--mantine-color-pink-outline-hover: rgba(255, 222, 235, 0.05);--mantine-color-grape-filled: var(--mantine-color-grape-5);--mantine-color-grape-filled-hover: var(--mantine-color-grape-6);--mantine-color-grape-light: rgba(229, 153, 247, 0.15);--mantine-color-grape-light-hover: rgba(229, 153, 247, 0.2);--mantine-color-grape-light-color: var(--mantine-color-grape-0);--mantine-color-grape-outline: var(--mantine-color-grape-1);--mantine-color-grape-outline-hover: rgba(243, 217, 250, 0.05);--mantine-color-violet-filled: var(--mantine-color-violet-5);--mantine-color-violet-filled-hover: var(--mantine-color-violet-6);--mantine-color-violet-light: rgba(209, 111, 255, 0.15);--mantine-color-violet-light-hover: rgba(209, 111, 255, 0.2);--mantine-color-violet-light-color: var(--mantine-color-violet-0);--mantine-color-violet-outline: var(--mantine-color-violet-1);--mantine-color-violet-outline-hover: rgba(241, 207, 255, 0.05);--mantine-color-indigo-filled: var(--mantine-color-indigo-5);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-6);--mantine-color-indigo-light: rgba(123, 121, 235, 0.15);--mantine-color-indigo-light-hover: rgba(123, 121, 235, 0.2);--mantine-color-indigo-light-color: var(--mantine-color-indigo-0);--mantine-color-indigo-outline: var(--mantine-color-indigo-1);--mantine-color-indigo-outline-hover: rgba(214, 213, 254, 0.05);--mantine-color-blue-filled: var(--mantine-color-blue-5);--mantine-color-blue-filled-hover: var(--mantine-color-blue-6);--mantine-color-blue-light: rgba(116, 192, 252, 0.15);--mantine-color-blue-light-hover: rgba(116, 192, 252, 0.2);--mantine-color-blue-light-color: var(--mantine-color-blue-0);--mantine-color-blue-outline: var(--mantine-color-blue-1);--mantine-color-blue-outline-hover: rgba(208, 235, 255, 0.05);--mantine-color-cyan-filled: var(--mantine-color-cyan-5);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-6);--mantine-color-cyan-light: rgba(100, 218, 255, 0.15);--mantine-color-cyan-light-hover: rgba(100, 218, 255, 0.2);--mantine-color-cyan-light-color: var(--mantine-color-cyan-0);--mantine-color-cyan-outline: var(--mantine-color-cyan-1);--mantine-color-cyan-outline-hover: rgba(202, 245, 255, 0.05);--mantine-color-teal-filled: var(--mantine-color-teal-5);--mantine-color-teal-filled-hover: var(--mantine-color-teal-6);--mantine-color-teal-light: rgba(99, 230, 190, 0.15);--mantine-color-teal-light-hover: rgba(99, 230, 190, 0.2);--mantine-color-teal-light-color: var(--mantine-color-teal-0);--mantine-color-teal-outline: var(--mantine-color-teal-1);--mantine-color-teal-outline-hover: rgba(195, 250, 232, 0.05);--mantine-color-green-filled: var(--mantine-color-green-5);--mantine-color-green-filled-hover: var(--mantine-color-green-6);--mantine-color-green-light: rgba(134, 223, 148, 0.15);--mantine-color-green-light-hover: rgba(134, 223, 148, 0.2);--mantine-color-green-light-color: var(--mantine-color-green-0);--mantine-color-green-outline: var(--mantine-color-green-1);--mantine-color-green-outline-hover: rgba(215, 246, 220, 0.05);--mantine-color-lime-filled: var(--mantine-color-lime-5);--mantine-color-lime-filled-hover: var(--mantine-color-lime-6);--mantine-color-lime-light: rgba(192, 235, 117, 0.15);--mantine-color-lime-light-hover: rgba(192, 235, 117, 0.2);--mantine-color-lime-light-color: var(--mantine-color-lime-0);--mantine-color-lime-outline: var(--mantine-color-lime-1);--mantine-color-lime-outline-hover: rgba(233, 250, 200, 0.05);--mantine-color-yellow-filled: var(--mantine-color-yellow-5);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-6);--mantine-color-yellow-light: rgba(255, 201, 102, 0.15);--mantine-color-yellow-light-hover: rgba(255, 201, 102, 0.2);--mantine-color-yellow-light-color: var(--mantine-color-yellow-0);--mantine-color-yellow-outline: var(--mantine-color-yellow-1);--mantine-color-yellow-outline-hover: rgba(255, 238, 205, 0.05);--mantine-color-orange-filled: var(--mantine-color-orange-5);--mantine-color-orange-filled-hover: var(--mantine-color-orange-6);--mantine-color-orange-light: rgba(255, 192, 120, 0.15);--mantine-color-orange-light-hover: rgba(255, 192, 120, 0.2);--mantine-color-orange-light-color: var(--mantine-color-orange-0);--mantine-color-orange-outline: var(--mantine-color-orange-1);--mantine-color-orange-outline-hover: rgba(255, 232, 204, 0.05);--app-cta-gradient: linear-gradient(90deg, var(--mantine-color-blue-9) 0%, var(--mantine-color-cyan-7) 100%);--app-color-surface: #2e2e2e;}
:root[data-mantine-color-scheme="light"], :host([data-mantine-color-scheme="light"]){--mantine-color-anchor: var(--mantine-color-text);--mantine-color-dimmed: #495057;--mantine-color-red-light: rgba(224, 40, 41, 0.1);--mantine-color-red-light-hover: rgba(224, 40, 41, 0.12);--mantine-color-red-outline-hover: rgba(224, 40, 41, 0.05);--mantine-color-violet-light: rgba(176, 9, 255, 0.1);--mantine-color-violet-light-hover: rgba(176, 9, 255, 0.12);--mantine-color-violet-outline-hover: rgba(176, 9, 255, 0.05);--mantine-color-indigo-light: rgba(45, 42, 223, 0.1);--mantine-color-indigo-light-hover: rgba(45, 42, 223, 0.12);--mantine-color-indigo-outline-hover: rgba(45, 42, 223, 0.05);--mantine-color-cyan-light: rgba(0, 194, 255, 0.1);--mantine-color-cyan-light-hover: rgba(0, 194, 255, 0.12);--mantine-color-cyan-outline-hover: rgba(0, 194, 255, 0.05);--mantine-color-green-light: rgba(63, 204, 84, 0.1);--mantine-color-green-light-hover: rgba(63, 204, 84, 0.12);--mantine-color-green-outline-hover: rgba(63, 204, 84, 0.05);--mantine-color-yellow-light: rgba(255, 169, 15, 0.1);--mantine-color-yellow-light-hover: rgba(255, 169, 15, 0.12);--mantine-color-yellow-outline-hover: rgba(255, 169, 15, 0.05);--app-color-surface: #f1f3f5;--app-cta-gradient: linear-gradient(90deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-5) 100%);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><div style="position:absolute;top:0rem" class=""></div><div style="max-width:var(--container-size-xl);height:100%;min-height:0rem" class=""><style data-mantine-styles="inline">.__m__-_R_5ub_{--grid-gutter:0rem;}</style><div style="height:100%;min-height:0rem" class="m_410352e9 mantine-Grid-root __m__-_R_5ub_"><div class="m_dee7bd2f mantine-Grid-inner" style="height:100%"><style data-mantine-styles="inline">.__m__-_R_rdub_{--col-flex-grow:auto;--col-flex-basis:91.66666666666667%;--col-max-width:91.66666666666667%;}@media(min-width: 48em){.__m__-_R_rdub_{--col-flex-grow:auto;--col-flex-basis:83.33333333333334%;--col-max-width:83.33333333333334%;}}</style><div style="min-width:0rem;height:100%;min-height:0rem;display:flex" class="m_96bdd299 mantine-Grid-col __m__-_R_rdub_"><style data-mantine-styles="inline">.__m__-_R_6qrdub_{margin-top:0rem;padding-inline:var(--mantine-spacing-xs);width:100%;}@media(min-width: 48em){.__m__-_R_6qrdub_{margin-top:var(--mantine-spacing-xl);width:80%;}}@media(min-width: 62em){.__m__-_R_6qrdub_{padding-inline:var(--mantine-spacing-xl);}}</style><div style="margin-inline:auto;max-width:var(--mantine-breakpoint-xl)" class="__m__-_R_6qrdub_"><div style="color:var(--mantine-color-dimmed)" class="m_4451eb3a mantine-Center-root" data-inline="true"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-inline-end:calc(0.125rem * var(--mantine-scale));color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-lock "><path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6"></path><path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path><path d="M8 11v-4a4 4 0 1 1 8 0v4"></path></svg></div><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">CSS: Адаптивность сайта</p></div><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size);margin-bottom:var(--mantine-spacing-xl)" class="m_8a5d1357 mantine-Title-root" data-order="1">Теория: Медиа-запросы и другие устройства</h1><script type="application/ld+json">{"@context":"https://schema.org","@type":"LearningResource","name":"Медиа-запросы и другие устройства","inLanguage":"ru","isPartOf":{"@type":"LearningResource","name":"CSS: Адаптивность сайта"},"isAccessibleForFree":"False","hasPart":{"@type":"WebPageElement","isAccessibleForFree":"False","cssSelector":".paywalled"}}</script><div class=""><div style="--alert-color:var(--mantine-color-indigo-light-color);margin-bottom:var(--mantine-spacing-lg);font-size:var(--mantine-font-size-lg)" class="m_66836ed3 mantine-Alert-root" id="mantine-_R_remqrdub_" role="alert" aria-describedby="mantine-_R_remqrdub_-body" aria-labelledby="mantine-_R_remqrdub_-title"><div class="m_a5d60502 mantine-Alert-wrapper"><div class="m_667f2a6a mantine-Alert-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-rocket "><path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3"></path><path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3"></path><path d="M14 9a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></div><div class="m_667c2793 mantine-Alert-body"><div class="m_6a03f287 mantine-Alert-title"><span id="mantine-_R_remqrdub_-title" class="m_698f4f23 mantine-Alert-label">Полный доступ к материалам</span></div><div id="mantine-_R_remqrdub_-body" class="m_7fa78076 mantine-Alert-message"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Зарегистрируйтесь и получите доступ к этому и десяткам других курсов</p><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:linear-gradient(45deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--button-hover:linear-gradient(45deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--button-color:var(--mantine-color-white);--button-bd:none" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-variant="gradient" data-size="xs" href="/u/new"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Зарегистрироваться</span></span></a></div></div></div></div></div><div class="paywalled m_d08caa0 mantine-Typography-root"><p>Медиа-запросы в качестве условия позволяют не только выставлять ширину/высоту и ориентацию экрана, но и более конкретно указывать устройство, для которого будут применены стили.</p>
<p>В стандарте CSS3 определены 4 основных типа устройств, которые возможно указать в качестве условия медиа-запроса:</p>
<ul>
<li><code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">all</code> — все доступные устройства. Этот тип используется по умолчанию, поэтому указывать его не обязательно.</li>
<li><code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">print</code> — принтеры. Эти стили используются при печати веб-страницы. Отдельный CSS для печати очень востребован при создании интернет-магазинов, так как пользователи зачастую распечатывают страницу с нужным им товаром.</li>
<li><code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">screen</code> — все экраны различных устройств. Сюда входят как дисплеи холодильников, так и 4К-мониторы.</li>
<li><code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">speech</code> — скринридеры. Это программное обеспечение для чтения текста, помогающие незрячим людям воспринимать информацию на странице.</li>
</ul>
<div style="margin-bottom:var(--mantine-spacing-lg)" class="m_e597c321 mantine-CodeHighlight-codeHighlight" dir="ltr"><div class="m_be7e9c9c mantine-CodeHighlight-controls"><button style="--ai-bg:transparent;--ai-hover:transparent;--ai-color:inherit;--ai-bd:none" class="mantine-focus-auto mantine-active m_d498bab7 mantine-CodeHighlight-control m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></span></button></div><div style="--scrollarea-scrollbar-size:calc(0.25rem * var(--mantine-scale));--sa-corner-width:0px;--sa-corner-height:0px" class="m_f744fd40 mantine-CodeHighlight-scrollarea m_d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden;overscroll-behavior-inline:none" class="m_c0783ff9 mantine-ScrollArea-viewport" data-scrollbars="xy"><div class="m_b1336c6 mantine-ScrollArea-content"><pre class="m_2c47c4fd mantine-CodeHighlight-pre" style="padding:0"><code class="m_5caae6d3 mantine-CodeHighlight-code"><style>
/* Стили сайта */
@media print {
/* Стили для вывода страницы на печать */
}
@media speech {
/* Стили для скринридеров */
}
</style></code></pre></div></div></div><button class="mantine-focus-auto m_c9378bc2 mantine-CodeHighlight-showCodeButton m_87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
<p>Так же, как и с остальными медиа-запросами, тип устройства можно указывать при подключении CSS-файла:</p>
<div style="margin-bottom:var(--mantine-spacing-lg)" class="m_e597c321 mantine-CodeHighlight-codeHighlight" dir="ltr"><div class="m_be7e9c9c mantine-CodeHighlight-controls"><button style="--ai-bg:transparent;--ai-hover:transparent;--ai-color:inherit;--ai-bd:none" class="mantine-focus-auto mantine-active m_d498bab7 mantine-CodeHighlight-control m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></span></button></div><div style="--scrollarea-scrollbar-size:calc(0.25rem * var(--mantine-scale));--sa-corner-width:0px;--sa-corner-height:0px" class="m_f744fd40 mantine-CodeHighlight-scrollarea m_d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden;overscroll-behavior-inline:none" class="m_c0783ff9 mantine-ScrollArea-viewport" data-scrollbars="xy"><div class="m_b1336c6 mantine-ScrollArea-content"><pre class="m_2c47c4fd mantine-CodeHighlight-pre" style="padding:0"><code class="m_5caae6d3 mantine-CodeHighlight-code"><!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Подключение CSS-файлов</title>
<!-- Общие стили для проекта -->
<link rel="stylesheet" href="style.css">
<!-- Стили вывода страницы на печать -->
<link rel="stylesheet" media="print" href="print.css">
</head>
<body>
<!-- Разметка проекта -->
</body>
</html></code></pre></div></div></div><button class="mantine-focus-auto m_c9378bc2 mantine-CodeHighlight-showCodeButton m_87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
<p>Помимо указания конкретного типа устройства, CSS позволяет указывать и особые характеристики устройства, для которого необходимо применить стили. Основными характеристиками, которые поддерживают большинство браузеров, являются:</p>
<ul>
<li><code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">color</code>. Количество бит цвета, которое способно воспроизвести устройство. Если значение не указано, то проверяется, что устройство может воспроизводить цвет.</li>
<li><code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">monochrome</code>. Монохромность устройства. Устройство является монохромным, если может воспроизводить только два основных цвета — чёрный и белый, а также их оттенки. Такими устройствами являются некоторые электронные книги.</li>
<li><code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">orientation</code>. Ориентация устройства. Подробнее эта характеристика была рассмотрена в прошлом уроке.</li>
<li><code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">aspect-ratio</code>. Характеристика, показывающая соотношение сторон <em>viewport</em>. Например <em>16/9</em> или <em>4/3</em>. Если разрешение <em>viewport</em> равняется 1280x720, то <code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">aspect-ratio</code> может принимать любые кратные этому разрешению числа, чтобы применились стили для данного разрешения. Например, можно указать <em>16/9</em>, <em>32/18</em>, <em>1280/720</em> и даже <em>2560/1440</em>.</li>
</ul>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6ODAxOSwicHVyIjoiYmxvYl9pZCJ9fQ==--cc37c70a0be997fbf61e7f45127df240a60f5253/comp_vs_mobile.png" alt="Соотношения сторон экрана" loading="lazy"/></p>
<div style="margin-bottom:var(--mantine-spacing-lg)" class="m_e597c321 mantine-CodeHighlight-codeHighlight" dir="ltr"><div class="m_be7e9c9c mantine-CodeHighlight-controls"><button style="--ai-bg:transparent;--ai-hover:transparent;--ai-color:inherit;--ai-bd:none" class="mantine-focus-auto mantine-active m_d498bab7 mantine-CodeHighlight-control m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></span></button></div><div style="--scrollarea-scrollbar-size:calc(0.25rem * var(--mantine-scale));--sa-corner-width:0px;--sa-corner-height:0px" class="m_f744fd40 mantine-CodeHighlight-scrollarea m_d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden;overscroll-behavior-inline:none" class="m_c0783ff9 mantine-ScrollArea-viewport" data-scrollbars="xy"><div class="m_b1336c6 mantine-ScrollArea-content"><pre class="m_2c47c4fd mantine-CodeHighlight-pre" style="padding:0"><code class="m_5caae6d3 mantine-CodeHighlight-code"><style>
/* Стили сайта */
@media (color) {
/* Стили для цветных устройств */
}
@media (aspect-ratio: 16/9) {
/* Стили страницы с соотношением 16 к 9 */
}
</style></code></pre></div></div></div><button class="mantine-focus-auto m_c9378bc2 mantine-CodeHighlight-showCodeButton m_87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><div style="margin-block:var(--mantine-spacing-xl)" class=""><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);margin-bottom:var(--mantine-spacing-md)" class="m_8a5d1357 mantine-Title-root" data-order="2">Рекомендуемые программы</h2><style data-mantine-styles="inline">.__m__-_R_2mremqrdub_{--carousel-slide-gap:var(--mantine-spacing-xs);--carousel-slide-size:70%;}@media(min-width: 36em){.__m__-_R_2mremqrdub_{--carousel-slide-gap:var(--mantine-spacing-xl);--carousel-slide-size:50%;}}</style><div style="--carousel-control-size:calc(2.5rem * var(--mantine-scale));--carousel-controls-offset:var(--mantine-spacing-sm);margin-bottom:var(--mantine-spacing-lg);padding-block:var(--mantine-spacing-sm);background:var(--app-color-surface)" class="m_17884d0f mantine-Carousel-root responsiveClassName" data-orientation="horizontal" data-include-gap-in-size="true"><div class="m_39bc3463 mantine-Carousel-controls" data-orientation="horizontal"><button class="mantine-focus-auto m_64f58e10 mantine-Carousel-control m_87cf2631 mantine-UnstyledButton-root" type="button" data-inactive="true" data-type="previous" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m_64f58e10 mantine-Carousel-control m_87cf2631 mantine-UnstyledButton-root" type="button" data-inactive="true" data-type="next" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(-90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><div class="m_a2dae653 mantine-Carousel-viewport" data-type="media"><div class="m_fcd81474 mantine-Carousel-container __m__-_R_2mremqrdub_" data-orientation="horizontal"><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/programs/professional-layout?promo_name=programs_list&promo_position=course&promo_creative=catalog_card&promo_type=card" target="_blank"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="--group-gap:calc(0.25rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">5 месяцев</span><span class="mantine-focus-auto m_b6d8b162 mantine-Text-root">·</span><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">С нуля</span></div><p style="margin-bottom:var(--mantine-spacing-sm);font-size:var(--mantine-font-size-h5);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Профессиональная верстка</p><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Адаптивная вёрстка для отображения на любых устройствах </p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDAzNCwicHVyIjoiYmxvYl9pZCJ9fQ==--ba516ea9573bdfcd1d21e2aa0fff8818561828f2/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Typing-bro.png" alt="Профессиональная верстка" loading="eager"/></div><div style="--group-gap:var(--mantine-spacing-md);--group-align:end;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-xs)" class="m_4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">от 3 900 ₽</p><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></div></div></a></div></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/programs/layout-designer-positioning?promo_name=programs_list&promo_position=course&promo_creative=catalog_card&promo_type=card" target="_blank"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="--group-gap:calc(0.25rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">1 месяц</span><span class="mantine-focus-auto m_b6d8b162 mantine-Text-root">·</span><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Для продвинутых</span></div><p style="margin-bottom:var(--mantine-spacing-sm);font-size:var(--mantine-font-size-h5);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Позиционирование в CSS</p><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Получите навык работы с CSS и адаптивными интерфейсами</p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDAwNCwicHVyIjoiYmxvYl9pZCJ9fQ==--43a2eb3595eeebb3357d478cbcb752d0026363de/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Website%20Creator-cuate.png" alt="Позиционирование в CSS" loading="eager"/></div><div style="--group-gap:var(--mantine-spacing-md);--group-align:end;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-xs)" class="m_4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">от 3 900 ₽</p><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></div></div></a></div></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses?promo_name=programs_list&promo_position=course&promo_creative=catalog_card&promo_type=card"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);margin-bottom:var(--mantine-spacing-md);font-size:var(--mantine-font-size-h3)" class="m_8a5d1357 mantine-Title-root" data-order="2" data-responsive="true">Каталог</h2><p style="margin-bottom:auto" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Полный список доступных курсов по разным направлениям</p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="/vite/assets/development-BVihs_d5.png" alt="Orientation"/></div></div></div></a></div></div></div></div></div></div></div></div></div><style data-mantine-styles="inline">.__m__-_R_1bdub_{--col-flex-grow:auto;--col-flex-basis:8.333333333333334%;--col-max-width:8.333333333333334%;}@media(min-width: 48em){.__m__-_R_1bdub_{--col-flex-grow:auto;--col-flex-basis:16.666666666666668%;--col-max-width:16.666666666666668%;}}</style><div style="min-width:0rem;height:100%;min-height:0rem" class="m_96bdd299 mantine-Grid-col __m__-_R_1bdub_"><div style="margin-inline:var(--mantine-spacing-xs)" class="mantine-visible-from-sm"><a style="--button-color:var(--mantine-color-white);margin-bottom:var(--mantine-spacing-lg);text-decoration:none" class="mantine-focus-auto m_849cf0da mantine-focus-auto m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/css-adaptive/lessons/other-device/finish_unit?unit=theory" data-disabled="true" data-block="true" disabled=""><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label"><span style="margin-inline-end:var(--mantine-spacing-xs)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Дальше</span>→</span></span></a><a style="padding-inline:0rem" class="mantine-focus-auto m_f0824112 mantine-NavLink-root m_87cf2631 mantine-UnstyledButton-root"><span class="m_690090b5 mantine-NavLink-section" data-position="left"><div style="--ti-size:var(--ti-size-sm);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-list-numbers "><path d="M11 6h9"></path><path d="M11 12h9"></path><path d="M12 18h8"></path><path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"></path><path d="M6 10v-6l-2 2"></path></svg></div></span><div class="m_f07af9d2 mantine-NavLink-body"><span class="m_1f6ac4c4 mantine-NavLink-label">Навигация по теме</span><span class="m_57492dcc mantine-NavLink-description">Теория</span></div><span class="m_690090b5 mantine-NavLink-section" data-position="right"></span></a><div style="margin-block:var(--mantine-spacing-lg)" class="m_3eebeb36 mantine-Divider-root" data-orientation="horizontal" role="separator"></div><div style="margin-block:var(--mantine-spacing-lg)" class=""><div style="justify-content:space-between;margin-bottom:calc(0.1875rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-xs)" class="m_8bffd616 mantine-Flex-root __m__-_R_qimrbdub_"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Завершено</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">0 / 7</p></div><div style="--progress-size:var(--progress-size-sm)" class="m_db6d6462 mantine-Progress-root" data-size="sm"><div style="--progress-section-size:0%;--progress-section-color:var(--mantine-color-gray-filled)" class="m_2242eb65 mantine-Progress-section" role="progressbar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" aria-valuetext="0%"></div></div></div><button style="padding-inline:0rem" class="mantine-focus-auto m_f0824112 mantine-NavLink-root m_87cf2631 mantine-UnstyledButton-root" type="button"><span class="m_690090b5 mantine-NavLink-section" data-position="left"><div style="--ti-size:var(--ti-size-sm);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-message "><path d="M8 9h8"></path><path d="M8 13h6"></path><path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12"></path></svg></div></span><div class="m_f07af9d2 mantine-NavLink-body"><span class="m_1f6ac4c4 mantine-NavLink-label">Обсуждения (архив)</span><span class="m_57492dcc mantine-NavLink-description"></span></div></button><div style="--toc-bg:var(--mantine-color-blue-light);--toc-color:var(--mantine-color-blue-light-color);--toc-size:var(--mantine-font-size-sm);--toc-radius:var(--mantine-radius-sm);margin-top:var(--mantine-spacing-xl)" class="m_bcaa9990 mantine-TableOfContents-root" data-variant="light" data-size="sm"></div></div><div class="mantine-hidden-from-sm"><div style="--stack-gap:0rem;--stack-align:stretch;--stack-justify:flex-start" class="m_6d731127 mantine-Stack-root"><a style="--button-color:var(--mantine-color-white);margin-bottom:var(--mantine-spacing-xs);padding:0rem;text-decoration:none" class="mantine-focus-auto m_849cf0da mantine-focus-auto m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/css-adaptive/lessons/other-device/finish_unit?unit=theory" data-disabled="true" data-block="true" disabled=""><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">→</span></span></a><button style="--ai-size:var(--ai-size-sm);--ai-bg:transparent;--ai-hover:var(--mantine-color-indigo-light-hover);--ai-color:var(--mantine-color-indigo-light-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;padding-block:var(--mantine-spacing-lg);color:inherit;width:100%" class="mantine-focus-auto m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="subtle" data-size="sm" data-disabled="true" type="button" disabled=""><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-list-numbers "><path d="M11 6h9"></path><path d="M11 12h9"></path><path d="M12 18h8"></path><path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"></path><path d="M6 10v-6l-2 2"></path></svg></span></button><button style="--ai-size:var(--ai-size-sm);--ai-bg:transparent;--ai-hover:var(--mantine-color-indigo-light-hover);--ai-color:var(--mantine-color-indigo-light-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;padding-block:var(--mantine-spacing-lg);color:inherit;width:100%" class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="subtle" data-size="sm" type="button"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-message "><path d="M8 9h8"></path><path d="M8 13h6"></path><path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12"></path></svg></span></button></div></div></div></div></div></div></div>
</main>
<footer class="bg-dark fw-light text-light px-3 py-5">
<div class="row small">
<div class="col-12 col-sm-6 col-md-3">
<div class="h5 mb-3">Хекслет</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/about">О нас</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/testimonials">Отзывы</a>
</li>
<li>
<span class="nav-link link-light py-1 ps-0 external-link" data-href="https://b2b.hexlet.io" role="button">Корпоративное обучение</span>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/blog">Блог</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/qna">Вопросы и ответы</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/glossary">Глоссарий</a>
</li>
<li>
<span class="nav-link link-light py-1 ps-0 external-link" data-href="https://help.hexlet.io" data-target="_blank" role="button">Справка</span>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" target="_blank" rel="noopener noreferrer" href="/map">Карта сайта</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5 fw-normal mb-3">Направления</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_devops">DevOps
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_data_analytics">Аналитика
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_backend_development">Бэкенд
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_programming">Программирование
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_testing">Тестирование
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_front_end_dev">Фронтенд
</a></li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5">Профессии</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/devops-engineer-from-scratch">DevOps-инженер с нуля</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/go">Go-разработчик</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/java">Java-разработчик</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/python">Python-разработчик </a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/data-analytics">Аналитик данных</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/qa-engineer">Инженер по ручному тестированию</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/php">РНР-разработчик</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/frontend">Фронтенд-разработчик</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5">Навыки</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/python-django-developer">Django</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/docker">Docker</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/php-laravel-developer">Laravel</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/postman">Postman</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/js-react-developer">React</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/js-rest-api">REST API в Node.js</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/spring-boot">Spring Boot</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/typescript">Typescript</a>
</li>
</ul>
</div>
</div>
<hr>
<div class="row">
<div class="col-12 col-sm-4 col-md-2">
<div class="fs-4">
<ul class="list-unstyled d-flex">
<li class="me-3">
<a aria-label="Telegram" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://t.me/hexlet_ru"><span class="bi bi-telegram"></span>
</a></li>
<li>
<a aria-label="Youtube" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://www.youtube.com/user/HexletUniversity"><span class="bi bi-youtube"></span>
</a></li>
</ul>
</div>
<div class="mb-2 d-flex flex-column">
<a class="link-light text-decoration-none" rel="nofollow" href="mailto:support@hexlet.io">support@hexlet.io</a>
<a class="link-light text-decoration-none py-2" target="_blank" href="https://t.me/hexlet_help_bot">t.me/hexlet_help_bot</a>
</div>
<ul class="list-unstyled d-flex">
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 external-link" rel="nofollow" data-href="https://hexlet.io/locale/switch?new_locale=en" data-target="_self" role="button"><span class="my-auto">EN</span>
</span></li>
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 opacity-100 external-link" rel="nofollow" data-href="https://ru.hexlet.io/locale/switch?new_locale=ru" data-target="_self" role="button"><span class="my-auto">RU</span>
</span></li>
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 external-link" rel="nofollow" data-href="https://kz.hexlet.io/locale/switch?new_locale=kz" data-target="_self" role="button"><span class="my-auto">KZ</span>
</span></li>
</ul>
</div>
<div class="col-12 col-sm-4 col-md-3">
<ul class="list-unstyled fs-4">
<li class="mb-3">
<a class="link-light text-decoration-none" href="tel:8%20800%20100%2022%2047">8 800 100 22 47</a>
<span class="d-block opacity-50 small">бесплатно по РФ</span>
</li>
<li>
<a class="link-light text-decoration-none" href="tel:%2B7%20495%20085%2021%2062">+7 495 085 21 62</a>
<span class="d-block opacity-50 small">бесплатно по Москве</span>
</li>
</ul>
</div>
<div class="col-12 col-sm-4 col-md-3">
<div class="small mb-3">Образовательные услуги оказываются на основании Л035-01298-77/01989008 от 14.03.2025</div>
<ul class="list-unstyled small">
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/legal">Правовая информация</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/offer">Оферта</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/license">Лицензия</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/contacts">Контакты</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-12 col-md-4 small">
<div class="mb-2">
<div>ООО «<a href="/" class="text-decoration-none link-light">Хекслет Рус</a>»</div>
<div>108813 г. Москва, вн.тер.г. поселение Московский,</div>
<div>г. Московский, ул. Солнечная, д. 3А, стр. 1, помещ. 20Б/3</div>
<div>ОГРН 1217300010476</div>
<div>ИНН 7325174845</div>
</div>
<hr>
<div>АНО ДПО «<a href="/" class="text-decoration-none link-light">Учебный центр «Хекслет</a>»</div>
<div>119331 г. Москва, вн. тер. г. муниципальный округ</div>
<div>Ломоносовский, пр-кт Вернадского, д. 29</div>
<div>ОГРН 1247700712390</div>
<div>ИНН 7736364948</div>
</div>
</div>
</footer>
<div id="root-assistant-offcanvas"></div>
<script src="/vite/assets/assistant-CdBlNCiQ.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/init-nkZBEvfU.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ErrorFallbackBlock-naDSYSy9.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/MarkdownBlock-DbyKWoR_.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/gon-D3e4yh1x.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/mantine-CGMYrt2Y.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/shiki-V011pkdv.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/utils-DRqSHbQE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-CCH8ilKF.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/lib-XR8Qr8kR.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dist-GCHh59xr.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Box-B5-OOzBf.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/notifications.store-C-3AFSMn.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useIsomorphicEffect-HJ6VK0D3.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/lib-KSp6QbZ0.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/axios-BEvgo0ym.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/classnames-l6ipYlLR.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dayjs.min-BkKovM-s.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/debounce-jMQ_Cf4f.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/i18next-BlSq9s7B.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/client-U9M77rxp.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-dom-DaLxUz_h.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useTranslation-Bx1Cdrkz.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/compiler-runtime-6XxiPFnt.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/jsx-runtime-CwjcCKJi.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-CkL4ZRHB.js" as="script" crossorigin="anonymous">
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v67327c56f0bb4ef8b305cae61679db8f1769101564043" integrity="sha512-rdcWY47ByXd76cbCFzznIcEaCN71jqkWBBqlwhF1SY7KubdLKZiEGeP7AyieKZlGP9hbY/MhGrwXzJC/HulNyg==" data-cf-beacon='{"version":"2024.11.0","token":"d11015b65d11429ea6b4a2ef37dd7e0b","server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>
</html>