如何在wordpress中仅为桌面视图应用css

Question

我在一个左侧有垂直导航菜单的网站上工作。现在我必须减少导航菜单的宽度，但是当我用桌面视图的普通css减小宽度时它也会影响移动视图，它也会减小移动视图中的宽度。那么有什么其他解决方案，css应该只适用于桌面视图。它不应该影响移动视图菜单标题。谢谢

Answer 1

如何在wordpress中仅为桌面视图应用css。

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 ...
}

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

如何在wordpress中仅为移动视图应用css。

@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 + * /你有任何问题铬，野生动物园，移动视图和桌面然后在这个媒体下面使用

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

Answer 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的头部响应。 *注意除了媒体查询之外，您必须使用一种代理检测，这将根据浏览器查看用户所使用的平台并基于此提供内容，但我不建议使用此方法。

Answer 3

仅对桌面设备使用css媒体查询示例：

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

这里有桌面和移动媒体查询Media Queries: How to target desktop, tablet and mobile?的链接