如何在wordpress中仅将css应用于桌面视图答案

【问题标题】：How to apply css only for desktop view in wordpress如何在wordpress中仅将css应用于桌面视图
【发布时间】：2017-12-21 05:49:39
【问题描述】：

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

【问题讨论】：

标签： css mobile desktop

【解决方案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+ */ 你有任何问题 chrome, and safari, mobile view and desktop 然后在这个媒体下面使用

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

【讨论】：

【解决方案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 头部响应。 *请注意，除了媒体查询之外，您还必须使用一种代理检测，这将根据浏览器查看用户所在的平台并根据该平台提供内容，但我不推荐这种方法。

【讨论】：

【解决方案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?

【讨论】：

我只需要知道 css 用于桌面视图。请告诉我