Як застосувати CSS тільки для перегляду робочого столу в WordPress - CSS, мобільний, настільний

Я працюю на веб-сайті, який має вертикальнавігаційне меню зліва. тепер мені доведеться зменшити ширину меню навігації, але коли я зменшу ширину за допомогою звичайного css для перегляду на робочому столі, це також вплине на перегляд мобільних пристроїв, також зменшить ширину в мобільному поданні. Так чи є якесь інше рішення, з якого css повинен застосовуватися лише для перегляду на робочому столі. це не повинно впливати на заголовок меню перегляду для мобільних пристроїв. Дякую

Відповіді:

0 для відповіді № 1

Як застосувати css лише для перегляду на робочому столі в wordpress.

1.) desktop view media queries.

@media only screen and (min-width:768px){
here your code ...
}

@media only screen and (min-width:910px){  <!-- wordpress. twentysixteen theme -->
here your code ...
}

================================================

Як застосувати css лише для мобільного перегляду в wordpress.

@media only screen and (max-width:767px){
here your code ...
}

@media only screen and (max-width:909px){  <!-- wordpress. twentysixteen theme -->
here your code ...
}

===============================================

/ * saf3 +, chrome1 + * / у вас є проблеми chrome, а safari, перегляд мобільних пристроїв і настільних ПК використовуйте нижче цього медіа

@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez  { color: red  }
}

---

0 для відповіді № 2

Використовуйте медіа-запити. Визначте мінімальну ширину для перегляду робочого столу. Це повинно виглядати приблизно так.

    @media only screen and (min-width: 1000px) {
/* Css for Desktop goes here like sample below*/
.desktop-header{height:100px;}
}

Пам’ятайте, що вам потрібно використовувати min, якщо ви хочете лише змінити елементи для перегляду робочого столу, це означає, що всі ширини дорівнюють пікселям, які ви вибираєте або перевищуєте. Також потрібно використовувати

<meta name="viewport" content="width=device-width, initial-scale=1">

в голові вашого HTML, щоб бути чуйним. * Зауважте, що крім медіа-запитів вам доведеться використовувати тип виявлення агента, це дозволить побачити, на якій платформі працює користувач, виходячи з браузера, і подавати вміст на основі цього, але я не рекомендую цей метод.

---

0 для відповіді № 3

Використовуйте мультимедійні запити css лише для настільних пристроїв приклад:

Desktop
@media only screen and (min-width: 1200px) and (max-width: 1920px) { .classname{width:250px}
}

тут переходять посилання на запити настільних та мобільних медіа Медіа-запити: як націлити на настільний ПК, планшет і мобільний телефон?

---