Показать раздел только в указанном медиа-запросе

Я работаю над адаптивностью своего веб-сайта, но столкнулся с проблемой. Я пытаюсь скрыть раздел, чтобы сделать его видимым только для телефона, но когда я пытаюсь установить свой display:none для своего раздела и включить его в своем медиа-запросе, он перезаписывается моим кодом запроса, не относящегося к медиа.

2 раздела, которые я хочу скрыть от пользователей ПК, это .phone-services и .avis-phone. Проблема в том, что, как я уже сказал, если я укажу их как display:none, они перезапишут мой медиа-запрос.

Вот часть моего @media CSS:

@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {

    .services {
        display:none !important;
    }

    .avis {
        display:none !important;
    }

    .phone-services {
        background:#02000A;
    }

    .avis-phone {
       background:#02000A;
       color:white;
   }
}

Вот часть другого CSS, который перезаписывает его:

@import url('https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&display=swap');

* {
    margin:0; padding:0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none; border:none;
    font-family: "Shippori Antique B1" , sans-serif;
    transition: .2s linear;

}

html{scroll-behavior:smooth !important}

a:visited{
    visibility:hidden;
}

.phone-services {
    display:none; /*Overwrites my media query*/
}

.avis-phone {
    display:none; /*Overwrites my media query*/
}

HTML:

<section class = "phone-services">
   Section need to be shown only for mobile
</section>
<section class = "avis-phone"> 
    Section need to be shown only for mobile
</section>

Спасибо за вашу помощь!

Привет, @DavidThomas, извини, я очень торопился, теперь я все изменил, чтобы лучше понимать и читать.

Sdev 05.04.2022 16:32

У вас уже есть ответы, один из которых вы приняли; но посмотрите эту демонстрацию, чтобы узнать, как использовать переменные CSS для достижения вашей цели: Демонстрация скрипта JS.

David Thomas 05.04.2022 17:14
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
2
48
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы всегда должны определять display, если вы скрываете/показываете их в зависимости от @media, как в части @media, так и в части, отличной от @media.

Попробуйте добавить в правила:

@media screen and ...

{

 .phone-services {
    background:#02000A;
    display: block; // can be block, inline-block, flex...
 }

 .avis-phone {
    background:#02000A;
    color:white;
    display: block; // can be block, inline-block, flex...
 }
}

Обратите внимание, что если у вас есть часть @media, загруженная до обычной, вы должны обязательно загрузить часть @media после, чтобы она не была переопределена, или вы можете использовать !important с правилом (не рекомендуется).

И причина, по которой вам нужно импортировать @medias после, заключается в том, что css каскадируется и обращает внимание только на последнее изменение, которое вниз с элементом

scripty dude 05.04.2022 17:17
Ответ принят как подходящий
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait)

min-device-width и max-device-width предназначены только для реальных устройств. Если вы попытаетесь смоделировать это на рабочем столе, это не сработает. Вместо этого вы должны использовать min-width и max-width.

Во-вторых, -webkit-min-device-pixel-ratio: 2 — это проверка разрешения устройства, но у нас есть разные устройства, которые мы не можем просто охватить с определенным разрешением. Я бы предложил удалить его.

Еще одна проблема отсюда

.phone-services {
    background:#02000A;
}

.avis-phone {
   background:#02000A;
   color:white;
}

Вы устанавливаете display: none, но не устанавливаете display: block (или любые другие видимые отображаемые значения)

Еще один момент, который я хотел бы отметить, это приоритет стиля от СВЕРХУ к НИЗУ, когда у них одинаковые селекторы. Ваш стиль отображения в медиа-запросе выше display: none, как показано ниже, это также вызовет проблемы с отображением

@media {
  .phone-services {
     display: block; /*NOT WORKING*/
  }
}
.phone-services {
    display:none;
}

Полное возможное изменение может быть

@import url('https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
  border: none;
  font-family: "Shippori Antique B1", sans-serif;
  transition: 0.2s linear;

}

html {
  scroll-behavior: smooth !important;
}

a:visited {
  visibility: hidden;
}

.phone-services {
  display: none;
}

.avis-phone {
  display: none;
}

@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) {

  .services {
display: none !important;
  }

  .avis {
display: none !important;
  }

  .phone-services {
background: #02000A;
display: block;
  }

  .avis-phone {
background: #02000A;
color: white;
display: block;
  }
}
<section class = "phone-services">
  Code in here
</section>
<section class = "avis-phone">
  Code in here
</section>

Другие вопросы по теме