Search the Community
Showing results for tags 'переоперделение стилей'.
Found 1 result
-
В медиа запросах в стилях стоят переопределенные стили под разные экраны, путём уменьшения экрана подключается эти медиа запросы. Видел ролик, что так нельзя делать. если в инспекторе закрыт стиль черточкой то это плохо, но не знаю почему. Стоит ли так делать или стоит всё переделать!? Мой сайт <!DOCTYPE html> <html lang="ru"> <head> <meta name="viewport" content="width=device-width"> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/clear_css.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/slider.css"> <meta charset="UTF-8"> <title>GoSport</title> </head> <body> <header class="header"> <div class="header-logo"> <img class="header-logo__img" src="img/logo.svg" alt="logo"> <div class="header-logo__logo-title"> <div class="header-logo__title-top">GoSport</div> <div class="header-logo__title-bottom">Магазин спортивных товаров</div> </div> </div> <div class="call"> <a class="call__number" href="tel:+7(495)746-86-48">+7(495)746-86-48</a> <button class="call__btn">Заказать звонок</button> </div> </header> <div class="header-menu"> <nav class="menu"> <a class="menu__link menu__link_none" href="#">Тренажеры</a> <a class="menu__link" href="#">Фитнес</a> <a class="menu__link" href="#">Инвентарь</a> <a class="menu__link" href="#">Массажное оборудование</a> <a class="menu__link" href="#">Другое</a> </nav> </div> <div class="lk-box"> <form class="form-search"> <input class="form-search__input-search" type="search" name="q" id="gsearch" placeholder="Поиск среди 7000 товаров"> <button class="form-search__find-button" type="submit"></button> </form> <div class="panel"> <button id="panel__exit">Войти</button> <button id="panel__basket">Корзина</button> </div> </div> <div class="description"> <div class="top-directory"> <h1 class="description__title"> Начните вести здоровый образ жизни вместе с GoSport! </h1> <p class="description__text"> Все товары вы сможете найти у нас в каталоге, на некоторые из них действуют сезонные скидки и спец предложения. У нас в наличии множество товаров как для новичков так и для профи. </p> <button class="description__btn"> Смотреть каталог </button> </div> <div class="top-slider"> Слайдер </div> </div> </body> </html> @charset "utf-8"; /* CSS Document */ .header { display: flex; justify-content: space-between; height: 91px; background-color: #2B3D2F; flex-wrap: nowrap; } .header-logo{ display: flex; align-items: center; align-self: center; flex: 0 0 auto; padding-left: 21px; } .header-logo__img{ width: 50px; height: 50px; } .header-logo__logo-title{ padding-left: 15px; } .header-logo__title-top{ font-family: Roboto; font-style: normal; font-weight: bold; font-size: 18px; line-height: 21px; color: #FFFFFF; } .header-logo__title-bottom{ font-family: Roboto; font-style: normal; font-weight: normal; font-size: 14px; line-height: 16px; color: #FFFFFF; } .call{ display: flex; justify-content: flex-end; align-items: center; align-self: center; flex: 0 0 auto; flex-wrap: wrap; } .call__number{ font-family: Roboto; font-style: normal; font-weight: bold; font-size: 14px; line-height: 16px; color: #FFFFFF; } .call__btn{ font-family: Roboto; font-style: normal; font-weight: normal; font-size: 13px; line-height: 15px; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 5px; padding: 15px; background: #2B3D2F; margin: 0px 80px 0px 38px; transition-duration: 2s; transition-property: border-color, color; } .call__btn:hover { border-color: chartreuse; color: chartreuse; } .header-menu { display: flex; align-items: center; height: 28px; background: rgba(22, 30, 25, 0.97); } .lk-box{ display: flex; justify-content: space-between; margin: 25px 0px 0px 0px; padding: 0px 70px; } @media screen and (max-width : 786px ){ .call__btn{ margin: 0px 10px 0px 10px; } .lk-box{ display: none; } nav.menu{ font-size: 10px; margin-left: 15px; } .call{ display: flex; margin: 0px; } .header-logo{ display: flex; justify-content: flex-start; padding: 0px 0px 0px 12px; } .header{ padding-top: 10px; height: 115px; } .header-menu{ height: 25px; } } @media screen and (max-width : 435px ){ nav.menu{ display: none; } .call__btn{ padding: 8px; } .header-logo{ padding: 0px; } .header-logo__logo-title{ padding-left: 5px; } .call{ padding-bottom: 5px; } .header{ flex-direction: column; justify-content: space-around; } .call__number{ display: none; } .header-menu{ height: 17px; } } .menu { display: flex; font-family: Roboto; margin-left: 71px; } .menu__link { display: flex; color: #FFFFFF; margin-left: 25px; flex: 0 1 auto; transition-duration: 0.7s; transition-property: color; } .menu__link_none { margin: 0; } .menu__link:hover { color: lightskyblue; } .form-search{ display: flex; flex: 0 1 auto; margin-left: -50px; } .form-search__input-search{ width: 345px; padding: 0px 15px; border: 1px solid #E6E6E6; border-radius: 3px; } .form-search__find-button{ background: url("../img/search-icon.svg") no-repeat 50% 50%; /* Параметры фона */ background-size: 25px; background-color: #FF8E25; border-radius: 0px 5px 5px 0px; width: 50px; height: 45px; flex: 0 0 auto; } .form-search__find-button:hover{ background-color: rgba(255,127,8,1.00); transition-duration: 0.9s; transition-property: background-color; } .form-search__input-search:hover{ border-color: dodgerblue; transition-duration: 1.2s; transition-property: border-color; } .panel{ display: flex; justify-content: space-between; } #panel__exit{ display: flex; justify-content: center; align-items: center; min-width: 100px; min-height: 45px; font-family: Roboto; font-style: normal; font-weight: normal; font-size: 14px; color: #FF8E25; transition-duration: 0.9s; transition-property: color, background-color; background-color: white; border: 1px solid #E6E6E6; border-radius: 3px; } #panel__exit:hover{ color: white; background: #FF8E25; } #panel__basket{ display: flex; justify-content: flex-start; align-items: center; width: 168px; height: 45px; background-color: #FF8E25; border-radius: 3px; font-family: Roboto; padding-left: 20px; font-style: normal; font-weight: normal; font-size: 14px; color: #FFFFFF; transition-duration: 0.9s; transition-property: background-color; margin-left: 20px; } #panel__basket:hover{ background-color: rgba(255,127,8,1.00); } .form-search__input-search:-ms-input-placeholder{ color: #DDDDDD; font-family: Roboto; font-style: normal; font-weight: normal; font-size: 14px; } .form-search__input-search::placeholder{ color: #DDDDDD; font-family: Roboto; font-style: normal; font-weight: normal; font-size: 14px; } @media screen and (max-width : 550px ){ .call__number{ display: none; } } .description{ display: flex; padding: 24px 81px 0px 80px } .top-directory{ display: flex; flex-direction: column; flex: 0 0 auto; width: 40%; padding-top: 50px; margin-right: 77px; } .description__title{ font-family: Roboto; font-style: normal; font-weight: bold; font-size: 36px; line-height: 42px; color: #161E19; } .description__text{ font-family: Roboto; font-style: normal; font-weight: normal; font-size: 14px; line-height: 16px; color: #161616; margin-top: 18px; } .description__btn{ width: 205px; height: 50px; font-family: Roboto; font-style: normal; font-weight: bold; font-size: 14px; line-height: 16px; color: #FFFFFF; background-color: #FF8E25; border-radius: 5px; margin: 35px 0px 0px 35px; } .description__btn:hover{ background: red; } .top-slider{ width: 60%; } @media screen and (max-width: 790px) { .description__title{ font-size: 24px; line-height: 28px; } .description__text{ display: none; } .description{ flex-direction: column; padding: 0px; } .top-directory{ display: flex; flex-direction: row; align-items: center; width: 100%; padding: 15px; } .description__btn{ margin: 0px 0px 0px 117px; padding: 0px 10px; } .top-slider{ width: 100%; } } @media screen and (max-width : 454px ){ .header-logo{ padding: 0px 5px; } .header-logo__logo-title{ display: none; } .description__btn{ font-size: 10px; line-height: 12px; margin: 7px 0px 0px 0px; width: 123px; height: 30px; } .description__title{ font-size: 14px; line-height: 16px; text-align: center; } .top-directory{ flex-direction: column; padding: 20px; } }
