仅为桌面设置样式(响应式网站)

Question

好的,我希望这一切都有道理,但我们走了......

我目前正在构建一个响应式网站,但桌面版已经完成.我在div包装器中有一个图像.其中有悬停状态并显示一些测试.这一切都是通过CSS完成的.

现在在平板电脑上,我希望能够为文本而不是悬停状态创建下拉列表.但问题是,当我将鼠标悬停在div上时,我需要点击内容显示的平板电脑版本(最大宽度:1024px).但我只想让它从jquery中显示onClick.

这是在网站上设置的CSS网站:

.textHoverWrapOne:hover div.block-50_textHoverOne, .textHoverWrapTwo:hover div.block-50_textHoverTwo, .textHoverWrapThree:hover div.block-50_textHoverThree,.textHoverWrapFour:hover div.block-50_textHoverFour, .textHoverWrapFive:hover div.block-50_textHoverFive, .textHoverWrapSix:hover div.block-50_textHoverSix{
    visibility: visible;
     opacity: 1;
     -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

我希望能够删除平板电脑和更小的样式.但我似乎无法清除它们.我能想到的唯一方法就是在移动设备/平板设备上删除带有jQuery的类,但它似乎太过于苛刻了.

有没有办法我可以将样式设置为仅使用媒体查询出现在1024px以上的任何内容？

Answer 1

@media screen and (min-width: 1024px) {
  // your rules here
}