Кто может помочь адаптировать страницу на сайте?

не очень понимаю как работают меда запросы, может кто-то сможет помочь

body {
    padding: 0;
    margin: 0;
    color: black;
    font-size: 16px;
    font-family: FuturaBookC;
}

h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
    text-transform: uppercase;
}

h1 {
    font-family: FuturaDemiC;
}

a {
    text-decoration: none;
}

p {
    margin: 0;
    font-size: 25px;
}

ul, li {
    display: block;
    padding: 0;
    margin: 0;
}

section {
    padding-top: 160px;
}

section h1 {
    margin-bottom: 40px;

}

.container {
    max-width: 1170px;
    /*позиционирование по центру*/
    margin: 0 auto; 
}

.header {
    background: linear-gradient(to right, #00a2ff, #00ffb4);
    width: 100%;
    height: 800px;
    padding-top: 110px;
}

.header1 {
    max-width: 1000px;
    height: 600px;
    background: #fff;
    margin: 0 auto;

    
}

header a {
    color: #000;
}

.menu {
    display: flex;
    margin-left: 450px;
    padding-top: 20px;

}

.menu li a {
    text-transform: capitalize;
    font-size: 24px;
}

.menu li a:hover {
    border-bottom: 1px solid #fff;
}

.menu li {
    margin-right: 40px;
}

.nav {
    align-items: center;
}

.logo {
    display: flex;
}

.offer {
    margin-top: 200px;
    margin-left: 50px;
}

.offer p {
    text-transform: uppercase;
}
.offer-right {
    float: right;
}
.offer-right {
    margin-left: auto;
}


.one, .two, .three {
    display: flex;
    margin-bottom: 150px;
}


.des-1, .des-3{
    width: 450px;
    margin-left: 200px;
    margin-top: 30px;
}

.for {
    display: flex;
}

.des-2, .des-4{
    width: 450px;
    margin-right: 200px;
    margin-top: 30px;
}

.objective1 h1{
    text-align: center;
    font-family: FuturaDemiC;
    margin-bottom: 73px;
}

.obj-1, .obj-2, .obj-3, .obj-4{
    width: 500px;
    text-align: center;
}

hr {
    border: none; 
    border-top: 2px solid #FFF623; 
    width: 100px;
    margin-top: 70px;
}


.objj1, .objj2{
    margin-bottom: 73px;
    display: flex;
    justify-content: space-between;
}

.footer{
    padding-top: 25px;
    width: 100%;
    height: 100px;
    background: #757575;
}

.footer p{
    font-size: 15px;
    margin-bottom: 10px;
}

@media (min-width: 1170px) {
    .container {
        max-width: 970px;
    }
  
}

@media (min-width: 992px) {
    .container {
        max-width: 750px;
    }


  
}

@media (min-width: 767px) {
    .container {
        max-width: none;
    }
  
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Document</title>
    <link rel="preload" href="/fonts/FuturaBookC.ttf" as="font">
    <link rel="preload" href="/fonts/FuturaDemiC.ttf" as="font">
    <link rel="stylesheet" href="css/main.css">
     <style type="text/css">
             @font-face {
    font-family: FuturaDemiC; 
    src: url(fonts/FuturaDemiC.ttf); 
   }
     @font-face {
    font-family: FuturaBookC; 
    src: url(fonts/FuturaBookC.ttf); 
   }
        </style>  
</head>
<body>
    <header id="header" class="header">
        <div class="container" >
            <div class="row">
            <div class="header1">
                <div class="nav">
                    <ul class="menu">
                    <li>
                        <a href="#">
                            Главная
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Руководитель
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Студенты
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Проекты
                        </a>
                    </li>
                </ul>
                </div>
                <div class="logo">
                <div class="offer">
                <h1> ПРОЕКТНАЯ <br>ЛАБОРАТОРИЯ </h1>
                <p>кафедра математики</p>
            </div>

            <div class="offer-right">
                <img src="img/logo-header.svg" alt="logo" style="margin-top: 100px; ">
            </div>
            
            </div>

            </div>
        </div>
        </div>
        </div>
    </header>

    <section id="about" class="about">
        <div class="container" >
            <div class="description">
                <div class="one">
                    <div class="one1">
                    <img src="img/1.svg" style="width: 450px; " >
                </div>
                <div class="des-1">
                    <h1>Что такое лаборатория?</h1>
                    <p>Лаборатория - это обьединение единомышленчерез проведение различных мероприятий в активной форме</p>
                </div>
            </div>
            <div class="two">
                <div class="des-2">
                    <h1>Чем мы занимаемся?</h1>
                    <p>Научной, прикладной и творческой деятельностью</p>
                </div>
                <div class="two2">
                    <img src="img/2.svg" style="width: 450px; " >
                </div>
            </div>
            <div class="three">
                <div class="three3">
                <img src="img/3.svg" style="width: 450px; ">
            </div>
            <div class="des-3">
                <h1>для чего?</h1>
                <p>У участников появляется возможность не только развить свой потенциал, но и пробовать себя в других направлениях деятельности через мастер-классы, исследовательскую и творческую деятельность.</p>
            </div>
            </div>
            <div class="for">
                <div class="des-4">
                    <h1>присоединяйся</h1>
                    <p>Нет иерархии в отношениях участников. Задачи решаются совместно, согласовано, происходит обмен знаниями. Такой подход к работе является очень эффективным.</p>
                </div>
                <div class="for4">
                    <img src="img/4.svg" alt="" style="width: 450px; " >
                </div>
            </div>

        </div>
        </div>
    </section>

    <section id="objective" class="objective" >
        <div class="container">
            <div class="objective1">
                <h1>основные задачи лаборатории</h1>
            </div>
            <div class="objj1">
            <div class="obj-1">
                <hr align="center" > 
                <p>повышение проффесионального мастерства учеников</p>
            </div>
            <div class="obj-2">
                <hr align="center" > 
                <p>поддерка творческой молодежи, использующей в своей работе инновационный и передовой опыт</p>
            </div>
        </div>
        <div class="objj2">
            <div class="obj-3">
                <hr align="center" >
                <p>совершенствование подходов к организации образовательного и творческого процесса с ориентацией на развитие личности   </p>
            </div>
            <div class="obj-4">
                <hr align="center" >
                <p>представлению возможности для самореализации и развития потенциала</p>
            </div>
        </div>
        </div>
    </section>


    <footer id="footer" class="footer">
        <div class="container">
            <div class="footer-text">
                <p>©1994—2021 УГНТУ</p>
                <p>[email protected]</p>
            </div>
            <div class="icons">
                <a class="instagram" href="https://www.instagram.com/bni_rusoil/">
                    <img src="img/inst.svg" alt="">
                </a>
                <a class="vk" href="https://m.vk.com/digital_track?from=groups%253Fact%253Dlist"><img src="img/vk.svg" alt=""></a>
            </div>
        </div>
    </footer>

</body>
</html>


Ответы (2 шт):

Автор решения: Rachel

Перед тем как задавать вопросы, стоит обращаться в документацию, т.к. документации по медиа запросам очень много, но всё же я продублирую её сюда

Медиазапросы — это модуль CSS3, который позволяет создавать отзывчивые веб-сайты, используя различные правила стилей для разных устройств или типов носителей. В зависимости от этих правил содержимое отображается в соответствии с различными условиями, например размером экрана, окна браузера или самого устройства, а также ориентацией и разрешением устройства.

В общем случае медиа-запрос состоит из ключевого слова, описывающего тип устройства (необязательный параметр) и выражения, проверяющего характеристики данного устройства. Из всех характеристик чаще всего проверяется ширина устройства width. Медиа-запрос является логическим выражением, которое возвращает истину или ложь.

@media (rules) - используется для применения стилей на определенных носителях, размерах экрана и т.д. Это позволяет нам указать различные варианты дизайна в зависимости от размера экрана. Затем страницу можно оптимизировать и показывать совершенно по-разному для мобильных телефонов, планшетов и разных размеров окон браузера.

@media (min-width: 500px) - говорит о том, что стили, которые указаны внутри этого медиа-правила, будут применены при минимальной ширине экрана 500px и шире.

@media (max-width: 500px) - говорит о том, что стили, которые указаны внутри этого медиа-правила, будут применены от нуля до максимальной ширины экрана в 500px.

P.S. Чтобы сайт корректно отображался на других устройствах лучше копировать весь код от прошлого медиа запроса, или стандартный, а потом менять под свои нужды...

Пример медиа запроса:

@media screen and (min-width: 480px) {
  body {
    background-color: #885053;
  }
}

Более подробно можно почитать тут - https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries

→ Ссылка
Автор решения: Rachel

Часть 2

Введение в Responsive веб дизайн Раньше сайты были с фиксированной версткой. Если сайт был в ширину 800 пикселей — он так и оставался 800 пикселей, на каком мониторе его ни открывай, большом или крохотном. Такой подход полностью устарел вместе с табличной версткой.

Потом сайты стали «резиновыми». Если мы меняли размер окна браузера — элементы сжимались или растягивались. Открывали на большом мониторе или на маленьком, или на смартфоне — везде сайт выглядел симпатично, менялся только масштаб. Это было удобно пользователю и смотрелось красиво. Но и такой подход тоже устарел.

Больше половины трафика в интернете приходится на мобильные телефоны и планшеты. Поэтому создание отзывчивых веб-сайтов сегодня является обязательным для разработчика интерфейсов.

Новые подходы к верстке В современном вебе используются новые подходы при создании веб сайтов. Они сочетают в себе элементы «резиновой» верстки и новые, современные приемы, такие как адаптивность и отзывчивость. Термины «адаптивный сайт» и «отзывчивый сайт» (adaptive и responsive) кардинально отличаются. Давайте разберемся, что это такое.

Отзывчивый сайт Сайт, который имеет несколько вариантов отображения, переходы между ними плавные, как на «резине». Меняете размер окна — кнопки медленно меняются в размерах, блоки плавно ужимаются, а когда наступает контрольная точка — сайт меняет расположение блоков под планшет или под смартфон.

Особенность: плавные переходы между ключевыми вариантами отображения. Если сайт оптимизировался под iPad, то он будет также хорошо смотреться и на Galaxy Tab, и на любом устройстве.

Адаптивный сайт Сайт, который на мониторе отображается одним образом, на планшете иначе, а на смартфоне — снова по-другому. Меняется расположение блоков, размеры кнопок и полей, текстов. Зачем? Чтобы пользователю было комфортнее пользоваться сайтом: в кнопку легче попадать пальцем, если она крупная, текст в метро легче читать, если он 20 пунктов, а не 14.

Особенность: сайт имеет всего несколько «вариантов отображения» в зависимости от ширины экрана или типа устройства. То есть на всех планшетах будет один сайт, без учета, что у них разные по размеру дисплеи. Аналогично — если менять размер окна браузера, то сайт будет меняться «рывками», а не так, как мы привыкли видеть на «резиновых» сайтах.

Что лучше? Нет однозначного ответа. Отзывчивая верстка определенно дороже, так как делать ее дольше. Иногда достаточно просто «резинового» сайта. Иногда — бизнес-задачи лучше выполнит отдельная мобильная версия. Или вообще приложение вместо сайта. Все больше и больше разработчики склоняются к «отзывчивым» сайтам. Именно этот подход мы и будем рассматривать более подробно.

Responsive meta tag Страницы, адаптированные для просмотра на разных устройствах, должны содержать в разделе head мета-тег viewport. Он сообщает браузеру, каким образом нужно контролировать размеры и масштаб страницы. Добавим в head, кроме всех остальных тегов, еще мета-тег вьюпорта.

Таким образом, ширина окна просмотра будет адаптироваться к ширине экрана устройства width=device-width, обеспечивая соотношение 1:1 между пикселями CSS и аппаратными пикселями устройства initial-scale=1.0

Chrome DevTools для работы с мобильной версткой Если перейти в режим DevTools и нажать на иконку #1 , мы перейдем в responsive режим, появятся дополнительные инструменты для работы с responsive версткой. Чтобы выйти из этого режима, нажмите на иконку #1 еще раз.

Теперь вы можете изменять ширину окна браузера, используя контролы #2 , простым растягиванием, как будто вы растягиваете или сжимаете окно браузера.

В группе #3 указаны текущие размеры ширины\высоты, а так же некоторые другие опции которые пока что нам не интересны. Немного ниже группы #3 находятся контролы быстрого изменения ширины экрана по стандартным точкам перелома. О них позже.

Философия Responsive веб дизайна Так как веб страницу сейчас можно открыть на множестве устройств и экранов, было необходимо решение проблем отображения контента. Философия отзывчивого веб дизайна построена на нескольких подходах и приемах при верстке. Давайте рассмотрим их подробнее.

Относительные единицы Сайт можно открыть на ПК, мобильном телефоне и т.д., при чем элементы интерфейса должны соблюдать пропорции, задуманые дизайнером. Плотность пикселей также может меняться, поэтому нам нужны единицы, которые гибки и работают повсюду. Вот где нам подходят относительные единицы, такие как проценты. Таким образом, если задать блоку ширину 50%, он всегда будет занимать половину экрана. Так же на помощь приходят rem и em для задания ширин элементов интерфейса и отступов в относительных единицах.

Правила responsive верстки В этом разделе мы познакомимся с методами, которые применяются при responsive верстке.

width в % Итак, ширины блоков мы задаем не в px, а в процентах. Таким образом, когда макет сжимается на крошечном мобильном устройстве или растягивается через огромный экран, все элементы в макете будут изменять их ширину по отношению друг к другу.

Чтобы рассчитать пропорции для каждого элемента страницы, вы должны разделить целевой элемент на его контекст. В настоящее время лучший способ сделать это - сначала открыть макет в редакторе, таком как Photoshop. Благодаря высокому качеству макета, вы можете измерить элемент страницы и разделить его на всю ширину страницы.

Например, если ваш макет по ширине равен 960 пикселям, тогда это будет ваше «контейнерное» значение. Предположим, что наш целевой элемент - это какое-то произвольное значение, например, 300 пикселей в ширину. Если умножить результат на 100, мы получим процентное значение 31,25%, которое мы можем применить к целевому элементу.

Если результирующее значение процентов получилось не целым, и вы получаете некоторое значение с плавающей точкой, не округляйте значение! Окончательный внешний вид страницы выиграет от кажущейся чрезмерной математической точности.

min и max width Важной частью отзывчивого дизайна является использование минимальных/максимальных ширин контейнеров в пикселях (или rem/em) и ширин в % для контента внутри контейнеров. При responsive верстке не может быть фиксированных ширин в пикселях даже у оберток(дальше контейнер), может быть только максимальная/минимальная ширина. Это сделано для того чтобы контейнер растягивался на 100% текущей ширины окна браузера, но не растягивался больше чем максимальная ширина указанная в макете.

Пример Напишем следующий HTML - контейнер для трех колонок, левого и правого сайдбаров и контентной части. Зададим контейнеру display flex, и высоту 200px для наглядности. К примеру, на макете content это обертка шириной 960px. Обратите внимание на max-width: 960px.

А теперь, к примеру, на макете мы отмеряли ширины left и right sidebar по 240px . Вместо того чтобы задать им ширину 240px, мы считаем ширину в процентах от общей ширины container.

width = 240 / 960 = 0.25

Помним, что для получения процентов нужно умножать результат на 100.

width в % = 0.25 * 100 = 25%

Так же мы можем замерить ширину content и высчитать ее. Допустим у нас получится 50% для articles, оставшееся свободное пространство.

Получилась классическая «резиновая» верстка. Теперь если вы будете растягивать или сужать окно браузера, верстка будет подстраиваться под текущую ширину экрана. Ширина sidebar'ов всегда будет равна по 25% от общей ширины, articles 50%.

margin Горизонтальный margin для блоков задается в процентах. Если бы по макету у нас были зазоры между articles и сайдбарами, и допустим articles был бы 46% шириной. Тогда ширины блоков выглядели бы следующим образом.

articles - 46% left-sidebar - 25% right-sidebar - 25% articles левый и правый margin был бы по 2% Итого занято 100% ширины content. Конечно, если мы используем Flexbox, то достаточно задать justify-content: space-between, явно задавать margin не надо. Зазоры между колонками все равно будут по 2%.

Не забывайте о том, что горизонтальный margin у блоков задается в % от ширины родителя. В то же время горизонтальный margin у элементов блока задается в rem. К примеру, блок статей. Если горизонтальный margin между статьями задается в %, то margin элементов внутри статьи задается в rem. Это не абсолютное правило, скорее хорошая практика.

padding В отличие от margin, в 99% случаев при responsive верстке, вертикальный и горизонтальный padding задается в rem\em.

Подведем итоги Это отличный подход к созданию отзывчивой веб страницы, но не все так просто. Когда ширина браузера становится слишком узкой, страница может начать сильно искажаться. Например, сложный трехколоночный макет не очень хорошо работает на небольшом мобильном телефоне. К счастью, отзывчивый дизайн позаботился об этой проблеме, используя медиа-запросы, о них позже.

Mobile-first vs Desktop-first responsive design Перед тем как разбираться с медиазапросами, давайте кратко поговорим о различиях между mobile-first и desktop-first подходами при responsive верстке.

Desktop-first Ориентирован на широкие экраны, - это подход, при котором стили применяются сначала к настольным устройствам. Расширенные стили и переопределения для меньших экранов затем добавляются в таблицу стилей через медизапросы.

Mobile-first Ориентирован на узкие экраны, - это подход, при котором стили применяются сначала к мобильным устройствам. Расширенные стили и другие переопределения для больших экранов затем добавляются в таблицу стилей через медизапросы.

По многим причинам, в том числе потому, что более 50% интернет-трафика приходится на мобильные телефоны, сейчас в веб разработке используют mobile-first подход.

Медиазапросы (Media Queries) Медиазапросы — это модуль CSS3, который позволяет создавать отзывчивые веб-сайты, используя различные правила стилей для разных устройств или типов носителей. В зависимости от этих правил содержимое отображается в соответствии с различными условиями, например размером экрана, окна браузера или самого устройства, а также ориентацией и разрешением устройства.

В общем случае медиа-запрос состоит из ключевого слова, описывающего тип устройства (необязательный параметр) и выражения, проверяющего характеристики данного устройства. Из всех характеристик чаще всего проверяется ширина устройства width. Медиа-запрос является логическим выражением, которое возвращает истину или ложь.

Способы добавления медиазапросов Существует несколько способов добавления медиазапросов к странице, появлялись они последовательно, с развитием отзывчивого веб-дизайна. Отличаются лишь в имплементации, результат работы будет одинаков.

В HTML файле Создается файл стилей и наполняется css правилами. После чего подключается к странице, используя тег link, к которому добавляется атрибут media. Отметим, что сам файл стилей будет загружен вместе со страницей, не зависимо от ширины экрана устройства. Но стили из него будут применены только при выполнении условий media.

Внутри таблицы стилей Создается файл стилей. Внутри него, используя специальную конструкцию @media, описываются стили для определенных ширин экрана. В примере ниже при ширине экрана 768px и выше цвет левой колонки изменится.

В современной разработке значительно чаще используется этот метод. Мы прописываем стили элементам интерфейса под определенные медиаправила, и они применяются в зависимости от условий.

@media (rules) - используется для применения стилей на определенных носителях, размерах экрана и т.д. Это позволяет нам указать различные варианты дизайна в зависимости от размера экрана. Затем страницу можно оптимизировать и показывать совершенно по-разному для мобильных телефонов, планшетов и разных размеров окон браузера.

min-width vs max-width Давайте разберемся с min-width и max-width в rules у медиа-запроса.

@media (min-width: 500px) - говорит о том, что стили, которые указаны внутри этого медиа-правила, будут применены при минимальной ширине экрана 500px и шире.

@media (max-width: 500px) - говорит о том, что стили, которые указаны внутри этого медиа-правила, будут применены от нуля до максимальной ширины экрана в 500px.

Логические операторы Логичным будет вопрос, а что делать, если я хочу чтобы какое-то css-правило применилось только в диапазоне, к примеру, от 400px до 800px? Или наоборот, применялось всегда кроме диапазона 400px-800px? Для этого существуют логические операторы. Мы рассмотрим самые распространенные.

Операторы and и not and - связывает между собой разные условия. Код ниже сделает так, что левая колонка будет окрашиваться в желтый цвет в диапазоне 400px - 800px. not - позволяет сработать медиазапросу в противоположном случае. Ключевое слово not добавляется в начало медиазапроса и применяется ко всему запросу целиком.

Типы устройств Что это за screen? Это один из типов устройств, всего их 4. Этот параметр не является обязательным и служит для более специфичного применения медиаправила.

Тип Описание all Подходит для всех типов устройств print Предназначен для страничных материалов и документов, просматриваемых на экране в режиме предварительного просмотра печати. screen Предназначен, в первую очередь для экранов цветных компьютерных мониторов. speech Предназначен для синтезаторов речи. Характеристики носителя К характеристикам медианосителя относятся проверяемые параметры устройства. Значения, которые используются при задании характеристик, являются контрольными точками. Такие как max-device-aspect-ratio, max-device-width, min-width, min-resolution и многие другие.

Device Orientation Если вам необходимо применить CSS в зависимости от ориентации браузера, вам помогут следующие правила. Это может быть особенно полезно для мобильных устройств.

ориентация правило Горизонтальная (landscape) @media screen and (orientation: landscape) {...} Вертикальная (portrait) @media screen and (orientation: portrait) {...} Pixel Ratio Важно иметь в виду, что пиксель CSS не должен быть таким же, как физический пиксель. Хотя экран может физически иметь ширину 720 пикселей, браузер может фактически применять CSS, предполагая, что он имеет ширину 480 пикселей. Это сделано затем, чтобы стандартная веб-страница с большей вероятностью подошла под экран. В этом примере соотношение пикселей равно 1,5:1 - на каждый пиксель CSS есть 1½ физических пикселя. Стандартный настольный монитор будет иметь соотношение пикселей 1:1 - один пиксель CSS к каждому физическому пикселю.

Это media будет применено к экранам с соотношением пикселей 2:1. Также можно использовать min-device-pixel-ratio и max-device-pixel-ratio.

Несколько медиаправил Вы можете применить сколько угодно правил @media, поэтому у вас может быть несколько разных дизайнов (макетов), зависящих от размера экрана.

Данные медиаправила будут изменять фон body в зависимости от ширины экрана.

Итак, алгоритм записи медиаправила:

Указываем @media и выражение проверки ширины экрана устройства Внутри media указываем css-правило для селектора Внутри css-правила указываем css-свойства и их значения, которые мы хотим применить при этом media Мы можем применить сколько угодно media в файле стилей, главное следить за выражениями проверки ширины экрана. Чтобы не было конфликтов. Внутри каждого media нет ограничения на количество css-правил, мы можем написать сколько угодно css правил для разных селекторов внутри одного media. css-правила наследуются. Это значит, правила написаные при min-width: 480px, будут применяться и при min-width: 768px. Как узнать какие прописывать медиаправила? При составлении медиазапросов нужно ориентироваться на так называемые переломные (контрольные) точки дизайна, т.е. такие значения ширины области просмотра, в которых дизайн сайта существенно меняется, например, изменяется положение элементов интерфейса. Для верстальщика это те точки, макеты для которых ему предоставили.

Под каждую контрольную точку рисуется отдельный макет. Между контрольными точками, верстка должна быть «резиновой». Чтобы адаптировать дизайн сайта под разные устройства, необходимо задать разные стили для разных разрешений экранов, используя определённые контрольные точки.

Распространенные переломные точки ширина устройство 320px Мобильные телефоны с узким экраном 480px Современные смартфоны среднего\высокого уровня 768px Таблетки 960px Таблетки с широким экраном 1200px Ноутбуки 1440px Десктопы Responsive images Отзывчивые изображения - изображения, которые хорошо отображаются на устройствах с различными размерами и разрешениями экрана.

Представьте изображение 1200x600 пикселей. Оно отлично выглядит на широком экране. А что будет, когда мы откроем нашу страницу, скажем на телефоне или таблетке? Ответ - ничего хорошего, без дополнительной работы, изображение будет оставаться шириной 1200px и появится полоса прокрутки. А как насчет веса изображения, действительно нужна ли нам картинка 1200x600 для телефона с экраном 320px?

max-width и height Самый простой способ создать отзывчивое изображение, это задать ему максимальную ширину в 100%. Если для свойства max-width установлено значение 100%, изображение будет уменьшаться, если необходимо, но никогда не растянется больше чем 100% своей оригинальной ширины.

Еще одним важным моментом является свойство height. Ему необходимо дать значение auto, для того чтобы изображение сохраняло пропорции при изменении своей ширины.

Не забывайте о том, что тег img строчный. Это значит что у него всегда будет зазор как у любого строчного элемента. Всегда необходимо делать img блочным.

Вот так будет работать отзывчивое изображение. Оно одно для всех устройств и просто подстраивается под текущую ширину экрана. Рассмотрим пример, создадим контейнер для картинки, зададим ему min/max ширину. Картинке дадим responsive-свойства. Теперь картинка будет всегда красиво заливать контейнер, изменяя свою ширину в зависимости от ширины контейнера.

Разные изображения для разных устройств 62% веса веба, это изображения. Большое изображение может быть идеальным на большом экране компьютера, но бесполезно на маленьком устройстве. Зачем загружать большое изображение, когда вы все равно должны его масштабировать? Чтобы уменьшить нагрузку, мы можем использовать тег picture.

picture tag illustration Тег picture предлагает браузеру для загрузки набор изображений. Браузер выбирает какое подходит лучше всего под текущие характеристики устройства и загружает всего лишь одно из них, а не все. Атрибуты srcset, sizes и тег source позволяют нам выделять несколько альтернативных источников и раздавать каждому устройству то изображение, которое лучше всего ему подходит.

srcset - определяет набор изображений, которые мы разрешаем браузеру выбирать, и размер каждого изображения. В него, через запятую, мы записываем пары значений - url картинки и ее ширину в пикселях (для srcset это w). Зачем говорить браузеру какая у картинки ширина? Это браузер, разве он не знает размеры картинки? Знает! Но только после того, как загрузит все изображения. Если же браузер знает информацию о размере картинок с самого начала, будет загружена только та картинка, которая сейчас нужна. sizes - определяет набор условий среды (например, ширины экрана) и указывает, какой размер изображения лучше всего выбрать, когда выполняются определенные условия мультимедиа. source - тег, используется в picture, имеет 2 атрибута, media и srcset, которые в паре определяют медиаправило и изображение, которое будет отображено при его выполнении. Прежде чем мы посмотрим примеры, вот несколько вещей, которые нужно иметь в виду:

picture требует img как своего последнего ребенка. Без img ничего не отображается. Это повышает доступность, поскольку есть только одно место для альтернативного текста, и оно отлично подходит для резервного содержимого в старых браузерах, которые не поддерживают picture. Думайте о атрибутах sizes и srcset тега picture, как о переопределяющих атрибут src тега img. Старые браузеры просто будут использовать img src. Список srcset и sizes - это подсказка для браузеров, а не указание. Например, устройство с отношением пикселей 1,5 может свободно использовать изображение 1x или 2x, в зависимости от того, что он знает о своих возможностях, сети и т. д. Выражение говорит: если этот медиа-запрос истинен, показать изображение с шириной 100vw. Первый подходящий медиа-запрос "побеждает", поэтому порядок источников имеет значение.

Статья с примерами обязательная к прочтению Mobile-first CSS Когда мы говорим об responsive веб-сайтах, термин mobile-first сразу приходит в голову. Для наших целей нам в первую очередь интересна медиа-функция min-width, которая позволяет применять конкретные стили CSS, если окно браузера опускается ниже определенной ширины, которую мы можем указать.

Медиазапросы, использующие min-width, чрезвычайно полезны, когда дело доходит до написания responsive веб-сайтов, поскольку это снижает сложность кода. Однако запросы минимальной ширины не являются панацеей, иногда бывает полезно добавить запросы max-width в таблицу стилей.

Давайте рассмотрим пример У нас есть 4 блока на странице: хедер, список с 3-мя элементами, карта и футер. Дополнительно у нас есть два вспомогательных тега, container как общая обертка страницы и content как обертка для карты и списка. Слева отображено их расположение на телефоне. Справа на ноутбуке. Как вы думаете, в каком случае надо будет написать меньше css кода для позиционирования?

Вспомним о потоке документа. Блоки в документе (по умолчанию) располагаются слева направо и сверху вниз. Думаю, вы уже догадались, что позиционировать элементы на картинке слева будет очень просто. Так как у нас элементы блочные достаточно просто написать html-разметку, и они встанут друг под другом. Плюсом будет то, что блочные элементы по умолчанию занимают 100% ширины родителя, поэтому нам не нужно в css задавать им явно ширину. Карты на узком экране нет, поэтому можем ее спрятать банальным display: none. В этом и есть сила mobile-first css.

Свойство min-width у container, это то значение ширины, ниже которого будет появляться полоса прокрутки. В современном вебе 320px считается минимально допустимой шириной экрана.

Заметьте, изначально даже нет media, так как стили пишутся для узкого экрана как база. Уже потом, при написании стилей для более широких экранов, мы добавляем media.

Теперь, используя mobile-first поход, добавим стили для более широкого экрана. Пусть для примера это будет 768px и шире. Добавим соответствующее media. Нам необходимо позиционировать карту и список рядом внутри content. Плюс карту нужно показать. Для примера дадим карте ширину 60%, а списку 40%. При верстке реального макета вы будете считать ширины блоков в % по формуле, которую мы изучили ранее.

Представим ситуацию, когда мы начали делать верстку с более широкого экрана. То, что мы писали в media, мы бы написали без media, после чего на более узком экране нам бы пришлось в media переопределять display: flex для content, flex-basis для списка и карты и т.д. Думаю, вы уже видите преимущества modile-first css.

Плюсы mobile-first css Изначальный css более чистый, так как нам помогает поток документа и блочная модель при позиционировании элементов интерфейса Наследование стилей от узких к широким экранам Минимальное переопределение стилей позиционирования, следующее из первого пункта И все же, min-width при mobile-first не является панацеей. Есть задачи, при mobile-first верстке которых решения очень элегантны. Достаточно добавить max-width или гибрида min-width to max-width медиаправил.

По ссылке в дополнительных материалах вы можете наглядно разобрать пример такой ситуации, когда у нас есть, к примеру галерея, которая в зависимости от ширины экрана вмещает в строку разное количество элементов.

Если нужен пример кода из реальной работы, то вот

.header{
    padding: 1rem 1rem 0 1rem;
    padding-bottom: 117px;
    background-image: url(../img/[email protected]);
    background-color: rgba(0, 0, 0, 0.8 );
    background-repeat: no-repeat;
    background-size: cover;
}



.logo{
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    margin-top: 110px;
}

.logo__link{
    color: #ffffff;
}

.menu{
    width: 190px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.menu__list > li{
    display: inline-block;
}

.menu__button{
    margin: 0 auto;
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #ffffff;
    padding: 12px 18px;
    background-color: transparent;
    border: 2px solid transparent;
    outline:none;
    
}



.menu__button:hover{
    background-color: transparent;
    border: 2px solid #ffffff;
    border-radius: 36px;
    transition: 2s all;
}

.header__title {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 28px;
    text-align: center;
    text-transform: uppercase;
    margin-top: 38px;
    margin-bottom: 19px;
}

.header__sub-title{
    color: #eee3de;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    text-align: center;
    font-size: 18px;
    width: 217px;
    margin: 0 auto;
}

.header__button-find{
    width: 87.5%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #ffffff;
    padding: 14px;
    background-color: #ff4e50;
    border: 0px;
    border-radius: 40px;
    display: block;
    margin: 0 auto;
    margin-top: 18px;
}



@media screen and (min-width: 768px){
    
    .header{
        padding-bottom: 139px;
        background-image: url(../img/[email protected]\ \(2\).png);
        background-color: rgba(0, 0, 0, 0.8 );
        background-position: center;
        
    }
    
    .nav-logo_wrapper{
        width: 669px;
        display: flex;
        flex-direction: row-reverse;
        margin: 0 auto;
        justify-content: space-between;
        
    }
    
    .logo{
        display: inline-block;
        font-family: 'Montserrat', sans-serif;
        font-size: 20px;
        text-transform: uppercase;
        font-weight: 700;

        margin-top: 46px;
        margin-bottom: 150px;
        
    }
    
    .menu__list > li {
        /* margin-top: 46px; */
    }

    .logo__link{
        color: #ffffff;
    }
    
    .menu{
       
        width: 190px;
        margin: 0;
        padding-top: 0;
        margin-top: 36px;
        display: inline-block;
        justify-content: space-between;
    }
    
    
    
    .menu__button{
        margin: 0 auto;
        display: inline-block;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        color: #ffffff;
        padding: 12px 18px;
        background-color: transparent;
        border: 2px solid transparent;
        outline:none;
        
    }
    
    
    
    .menu__button:hover{
        background-color: transparent;
        border: 2px solid #ffffff;
        border-radius: 36px;
        /* transition: 2s ease-in-out; */
    }
    
    .header__title {
        color: #ffffff;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 52px;
        text-align: center;
        text-transform: uppercase;
        margin-top: 160px;
        width: 503px;
        margin: 0 auto;
    }
    
    .header__sub-title{
        color: #eee3de;
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
        text-align: center;
        font-size: 24px;
        margin-top: 40px;
        width: 398px;
        
    }
    
    .header__button-find{
        width: 237px;
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 700;
        color: #ffffff;
        padding:  14px 25px;
        background-color: #ff4e50;
        border: 0px;
        border-radius: 40px;
        display: block;
        margin: 0 auto;
        margin-top: 36px;
    }

    
}

Желаю Вам удачи)

→ Ссылка