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

Question

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

Answer 1

仅对桌面设备使用 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?

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 仅应用于 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 ...
}

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

如何在 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+ */ 你有什么问题chrome, safari, mobile view and desktop 然后在这个media下使用

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

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

How to apply css only for desktop view in wordpress

css

mobile

desktop