{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В современном мире, где люди используют разные устройства для доступа к интернет, адаптивность веб-сайта стала обязательной. Это означает, что ваш сайт должен отлично выглядеть и работать как на больших экранах компьютеров, так и на смартфонах и планшетах. В этой статье мы разберемся, как создать адаптивный веб-сайт с помощью CSS в Visual Studio Code.","type":"unstyled","key":"6rj1t"},{"data":{"image":{"id":"672219130599cc378bae37a5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как создать адаптивный веб-сайт с помощью CSS в Visual Studio Code","type":"atomic:image","key":"ahadj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"1. Настройка HTML-шаблона","type":"header-two","key":"9ak6j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте Visual Studio Code и создайте новый HTML-файл.","type":"unordered-list-item","key":"f2tq5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавьте базовый HTML-шаблон:","type":"unordered-list-item","key":"ujds"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"2ej9n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"9dudt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"9lcr8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мой адаптивный сайт ","type":"blockquote","key":"cr0jn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"cbcc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"86jtm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"f55dr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Заголовок сайта

","type":"blockquote","key":"4f0o6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Текст сайта

","type":"blockquote","key":"4kckc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"27jre"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"7t00q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":70,"offset":0,"style":"BOLD"}],"text":" - важный мета-тег, который указывает браузеру на то, как масштабировать сайт на разных устройствах.","type":"unordered-list-item","key":"17j8l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":" - ссылка на ваш CSS-файл, где будут записаны стили для адаптивности.","type":"unordered-list-item","key":"ba9dd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"2. Создание CSS-файла","type":"header-three","key":"29mdi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте новый CSS-файл в той же папке, что и HTML-файл.","type":"unordered-list-item","key":"9nevq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сохраните его как style.css.","type":"unordered-list-item","key":"cqava"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"3. Использование Media Queries","type":"unstyled","key":"6drk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Media Queries в CSS позволяют применять разные стили в зависимости от ширины экрана устройства.","type":"unordered-list-item","key":"2imvl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В вашем style.css файле добавьте следующие стили:","type":"unordered-list-item","key":"bc4pv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Базовые стили для всех устройств ","type":"blockquote","key":"ea69e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"*/ body { ","type":"blockquote","key":"ccvi0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"font-family: sans-serif; ","type":"blockquote","key":"bdjft"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" margin: 0; ","type":"blockquote","key":"ge9h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"padding: 0;","type":"blockquote","key":"f0v5n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" } ","type":"blockquote","key":"9upuk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nh1 { ","type":"blockquote","key":"bcn8t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" text-align: center; ","type":"blockquote","key":"a5igd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"margin-top: 20px; ","type":"blockquote","key":"47vl6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" font-size: 32px","type":"blockquote","key":"2hm0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"; } \np { ","type":"blockquote","key":"e1cq8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" text-align: center; ","type":"blockquote","key":"dlcia"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"margin: 20px; ","type":"blockquote","key":"dpob0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"} \n/* Стили для небольших экранов (мобильные устройства) */ @media (max-width: 768px) { ","type":"blockquote","key":"7mict"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"h1 { ","type":"blockquote","key":"6tvqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" font-size: 24px; ","type":"blockquote","key":"bphav"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"} \n p { ","type":"blockquote","key":"6rfh9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"font-size: 16px; ","type":"blockquote","key":"8lai3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"} } \n/* Стили для больших экранов (компьютеры) */ @media (min-width: 768px) { h1 { ","type":"blockquote","key":"4q09s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" font-size: 48px; ","type":"blockquote","key":"4472r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"} \n p { ","type":"blockquote","key":"2ibi8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"font-size: 20px; ","type":"blockquote","key":"avnqm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" } }","type":"blockquote","key":"5embq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере мы задаем базовые стили для всех устройств и добавляем Media Queries для мобильных и десктопных версий сайта, изменяя размер шрифта заголовка и текста.","type":"unordered-list-item","key":"du8ah"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"4. Дополнительные методы адаптации:","type":"header-three","key":"d6ssv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Flexbox: Позволяет создавать гибкие макеты, которые автоматически подстраиваются под разные размеры экранов.","type":"unordered-list-item","key":"9iv47"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"Grid: Предоставляет более точный контроль над расположением элементов на странице.","type":"unordered-list-item","key":"7iake"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Relative Units: Используйте относительные единицы измерения (например, em, rem, vh, vw) для определения размеров элементов в зависимости от размера экрана.","type":"unordered-list-item","key":"clcj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"5. Проверка адаптивности","type":"header-three","key":"bvgc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте ваш HTML-файл в браузере.","type":"unordered-list-item","key":"5h9f0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используйте инструменты разработчика (F12) в браузере, чтобы проверить, как ваш сайт выглядит на разных размерах экранов.","type":"unordered-list-item","key":"6rt2g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изменяйте размеры окна браузера, чтобы увидеть, как стили адаптируются.","type":"unordered-list-item","key":"fqnil"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Просмотрите ваш сайт на разных устройствах (смартфоне, планшете) для финальной проверки.","type":"unordered-list-item","key":"d9fec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Заключение","type":"unstyled","key":"efl5t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Следуя этим простым шагам, вы сможете создать адаптивный веб-сайт, который будет отлично смотреться и работать на всех устройствах. Запомните, что адаптивность - это не одноразовая задача, а постоянная оптимизация, так как появляются новые устройства с разными размерами экранов.","type":"unstyled","key":"2vur8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"BOLD"},{"length":77,"offset":42,"style":"BOLD"}],"text":"\uD83D\uDC4D Лайкни пост, если статья была полезной!\n\uD83D\uDCAC А в комментариях расскажи, какие еще темы по веб-разработке тебе интересны?","type":"unstyled","key":"dhpv6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"klsJHzIlPjcSz5syR74n"}],"entityMap":{}},"mentions":[]}