Como aplicar css apenas para visualização desktop no wordpress - css, mobile, desktop

Estou trabalhando em um site que tem verticalmenu de navegação no lado esquerdo. agora eu tenho que reduzir a largura do menu de navegação, mas quando eu reduzir a largura com css normal para desktop, ele também afeta a visão móvel, também reduz a largura na visão móvel. Então, existe alguma outra solução a partir da qual o css deve se aplicar apenas para a visualização da área de trabalho. não deve afetar o cabeçalho do menu de exibição móvel. obrigado

Respostas:

0 para resposta № 1

Como aplicar o css apenas para visualização em desktop no 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 ...
}

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

Como aplicar o css apenas para a visualização Mobile no 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 + * / você tem qualquer problema chrome e safari, mobile view e desktop use abaixo desta mídia

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

---

0 para resposta № 2

Use as consultas de mídia. Decida uma largura mínima para a exibição da área de trabalho. Deve ser algo assim.

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

Lembre-se de que você precisa usar min se quiser apenas alterar elementos para a visualização da área de trabalho. Isso significa todas as larguras iguais ou superiores aos pixels escolhidos. Você também precisa usar

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

na cabeça do seu html para ser responsivo. * Observação além das consultas de mídia você teria que usar um tipo de detecção de agente, isso vai ver em qual plataforma o usuário está baseado fora do navegador e servir conteúdo baseado nisso, mas eu não recomendo este método.

---

0 para resposta № 3

Use as consultas de mídia css somente para dispositivos de desktop exemplo:

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

aqui vai links para consultas de mídia de desktop e móveis Consultas de mídia: como segmentar computadores, tablets e celulares?

---