我正在使用wordpress 3.8的主题。我在我的代码中包含了一些触摸效果，我想关闭平板电脑和手机设备。我创建了一个没有悬停效果的新css，并将其放在我的主样式表中：
@media all and (max-width: 699px) and (min-width: 520px)
然而它似乎没有起作用。我已经看过帖子Media Queries CSS以及关于该主题的其他几篇帖子，但我无法让它正常工作。有什么建议吗？
原创CSS：
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {
display: block;
height: 100%;
max-width: 100%;
vertical-align: middle;
height: max;
padding: 10px 20px 20px;
position: relative
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.view a.info:hover {
box-shadow: 0 0 5px #000
}
.view-first img {
transition: all 0.2s linear;
}
.view-first .mask {
opacity: 0;
background-color: rgba(219,127,8, 0.7);
transition: all 0.4s ease-in-out;
}
.view-first h2 {
transform: translateY(-100px);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first p {
transform: translateY(100px);
opacity: 0;
transition: all 0.2s linear;
}
.view-first a.info{
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first:hover img {
transform: scale(1.1);
}
.view-first:hover .mask {
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
opacity: 1;
transform: translateY(0px);
}
.view-first:hover p {
transition-delay: 0.1s;
}
.view-first:hover a.info {
transition-delay: 0.2s;
}
media css
@media only screen and (min-device-width: 340px) {
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {
display: block;
height: 100%;
max-width: 100%;
vertical-align: middle;
height: max;
padding: 10px 20px 20px;
position: relative
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.view a.info {
box-shadow: 0 0 5px #000
}
.view-first img {
transition: all 0.2s linear;
}
.view-first .mask {
opacity: 0;
background-color: rgba(219,127,8, 0.7);
transition: all 0.4s ease-in-out;
}
.view-first h2 {
transform: translateY(-100px);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first p {
transform: translateY(100px);
opacity: 0;
transition: all 0.2s linear;
}
.view-first a.info{
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first img {
transform: scale(1.1);
}
.view-first .mask {
opacity: 1;
}
.view-first h2,
.view-first p,
.view-first:hover a.info {
opacity: 1;
transform: translateY(0px);
}
.view-first p {
transition-delay: 0.1s;
}
.view-first a.info {
transition-delay: 0.2s;
答案 0 :(得分：0)
可能重复：@Media min-width & max-width
而不是all and使用only screen and而不是max-width使用min-device-width这应该可以解决您的问题
编辑：
例如，你不能这样做：
原文：
.view a.info:hover {
box-shadow: 0 0 5px #000
}
新：
.view a.info {
box-shadow: 0 0 5px #000
}
它仍然有HOVER，因为它在原始文件中并且它将使用它。你可以做的是改变原件以影响除了你想要改变的那些之外的所有屏幕..
例如：
最小尺寸为500px的屏幕将具有HOVER效果，并在此处添加：
.view a.info:hover {
box-shadow: 0 0 5px #000
}
但对于第二个媒体屏幕，所以500以下的任何东西
.view a.info{
box-shadow: 0 0 5px #000
}
这样可行......现在在你的情况下你可以试试HOVER但是把它留在里面
答案 1 :(得分：0)
这有效。
@media only screen and (max-device-width: 340px)
使用@media并从css代码中删除悬停选择器可让悬停效果显示在平板电脑和手机上。这是一个简单的解决方案，并且无需使用任何javascript来使您的css在触摸屏设备上运行。