在 WordPress 中使用 CSS 进行媒体查询

Posted 2023-03-06

【中文标题】在 WordPress 中使用 CSS 进行媒体查询

【英文标题】：Media queries with CSS in WordPress

【发布时间】：2014-01-29 01:10:20

【问题描述】：

我正在使用 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;

媒体 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;

【问题讨论】：

@Media min-width & max-width的可能重复

【参考方案1】：

这行得通。

@media only screen and (max-device-width: 340px)

使用 @media 并从您的 CSS 代码中删除悬停选择器可以让悬停效果显示在平板电脑和手机上。这是一个简单的解决方案，无需使用任何 javascript 来使您的 css 在触摸屏设备上工作。

【参考方案2】：

可能重复：@Media min-width & max-width

使用 only screen and 而不是 all 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 但内部保持空白

【讨论】：

只使用了@media 屏幕并且 (min-device-width: 340px) 没有运气

你能从 ORIGINAL 和你的 NEW 代码中发布你的代码吗，这个类可能是继承的，它不会覆盖..

已发布。我很抱歉格式化。我试图修复它，但由于某种原因它没有让我这样做。代码中唯一的区别是我将鼠标悬停在使用它的任何元素上..

您需要在您的新代码中保留所有原始设置.. 并且只需编辑属性.. 否则它将无法工作..

@media only screen and (max-device-width: 340px) 这个工作。感谢您的帮助。

【参考方案3】：

@media 仅屏幕和（最大宽度：768px）pcolor:orange;

@media only screen and (min-width: 770px) pcolor:green;

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。