Я работаю над адаптивностью своего веб-сайта, но столкнулся с проблемой.
Я пытаюсь скрыть раздел, чтобы сделать его видимым только для телефона, но когда я пытаюсь установить свой 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>
Спасибо за вашу помощь!
У вас уже есть ответы, один из которых вы приняли; но посмотрите эту демонстрацию, чтобы узнать, как использовать переменные CSS для достижения вашей цели: Демонстрация скрипта JS.
Вы всегда должны определять 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 каскадируется и обращает внимание только на последнее изменение, которое вниз с элементом
@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>
Привет, @DavidThomas, извини, я очень торопился, теперь я все изменил, чтобы лучше понимать и читать.