Wordpress 如何取消响应网站页脚菜单中的CSS效果?
我一直在使用本教程()构建我的页脚菜单。它只适用于桌面版本。我正在尝试编辑移动版的页脚菜单,为此,我尝试取消@media中的效果 桌面版Wordpress 如何取消响应网站页脚菜单中的CSS效果?,wordpress,css,responsive-design,Wordpress,Css,Responsive Design,我一直在使用本教程()构建我的页脚菜单。它只适用于桌面版本。我正在尝试编辑移动版的页脚菜单,为此,我尝试取消@media中的效果 桌面版 .ca-menu { padding: 0; margin: 20px auto; width: 100%; text-decoration: none; } .ca-menu li { float: left; width: 22.916666667%; overflow: hidden; po
.ca-menu {
padding: 0;
margin: 20px auto;
width: 100%;
text-decoration: none;
}
.ca-menu li {
float: left;
width: 22.916666667%;
overflow: hidden;
position: relative;
background: none;
margin-right: 4px;
text-decoration: none;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-menu li:hover {
z-index:999;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.ca-menu li:hover .aboutimg, .ca-menu li:hover .contactimg, .ca-menu li:hover .downloadimg, .ca-menu li:hover .facebookimg {
color: #ffffff;
/**font-size: 30px;**/
opacity:0.3;
}
.ca-main{
font-family: 'PrintClearlyRegular';
font-weight: normal;
font-style: normal;
font-size: 1.75em;
text-align: center;
padding: 5px 0 0 0;
text-align: center;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
text-decoration: none;
}
.ca-menu li:hover .ca-main{
color: #ffffff;
-webkit-animation: smallToBig 300ms ease;
-moz-animation: smallToBig 300ms ease;
-ms-animation: smallToBig 300ms ease;
font-size: 2.1em;
padding: 5px 0 0 0;
margin: 0;
}
.ca-menu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
position: relative;
text-decoration: none;
}
@-webkit-keyframes smallToBig{
from {
-webkit-transform: scale(0.1);
}
to {
-webkit-transform: scale(1);
}
}
@-moz-keyframes smallToBig{
from {
-moz-transform: scale(0.1);
}
to {
-moz-transform: scale(1);
}
}
@-ms-keyframes smallToBig{
from {
-ms-transform: scale(0.1);
}
to {
-ms-transform: scale(1);
}
}
移动版(@仅媒体屏幕和(最大宽度:480px))
然而,当我在手机版上测试时,链接一直在跳。我不想链接跳起来或类似的东西,但我无法修复它!我需要做什么来修复它?问题出在移动版本的.ca main中。您没有设置“边距:0”,因为它是H3,所以它已经有边距。因此,当您悬停li时,边距将被删除,您将获得“跳跃”效果。它与过渡或动画无关
顺便说一句,custom.js第14行出现语法错误。您可以为不同屏幕编写媒体查询,并为所有屏幕提供css样式 媒体查询示例
@media screen and (max-width: 1024px) {
//your changed code here;
}
@media screen and (max-width: 950px) {
//your changed style here;
}
@media screen and (max-width: 768px) {
//your changed style here;
}
你可以从网上找到不同的屏幕尺寸
或者,如果你想使下拉框在任何大小的屏幕上,你可以参考这个链接
她已经在使用媒体查询了。问题是她不知道里面的CSS有什么问题。谢谢,但我已经在使用这种方法,但我只发现桌面上的编码(@media screen and(max width:1024px))会转移到其他@media屏幕上,除非你在不同版本中为特定区域指定了不同的效果。谢谢,成功了!顺便说一句,custom.js用于联系人页面,效果很好。错误是什么?第14行是'var-emailReg=/^([w-.]+@([w-]+.)+[w-]{2,4})$/;'它显示的正是此错误:。解决此问题的所有信息都在那里。您给我的有关此错误的链接是关于更换线路的。它与这个错误有什么关系?请给我详细解释一下。另外,我现在正在寻找几个月前在没有任何wordpress插件的情况下用于构建此联系人表单的教程。请尝试以下内容:
/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/代码>找到了教程。是的。顺便说一句,我把你写的写在第14行,但是我的Adobe Dreamweaver软件在第30行返回了另一个错误(返回false;)
@media screen and (max-width: 1024px) {
//your changed code here;
}
@media screen and (max-width: 950px) {
//your changed style here;
}
@media screen and (max-width: 768px) {
//your changed style here;
}