如何仅将CSS应用于WordPress中的桌面视图

Question

我在网站上工作，该网站在左侧具有垂直导航菜单。现在，我必须减少导航菜单的宽度，但是当我使用普通的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 ...
}

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

如何仅将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  }
}

Answer 2

使用媒体查询。确定桌面视图的最小宽度。它应该看起来像这样。

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

请记住，如果您只想更改桌面视图的元素，则需要使用最小值，这意味着所有宽度等于或超越您选择的像素。您也需要使用

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

此处进入桌面和移动媒体查询媒体查询的链接：如何定位桌面，平板电脑和手机？