Html 仅更改移动屏幕的标题背景
我正在尝试仅更改移动屏幕大小的标题背景色。下面的按钮不起作用 理想情况下,我不想更改标头或标头包装代码,因为这样可以正常工作。为了获得更多的上下文信息,如果需要的话,我使用了这个fiddle:但是有意地希望标题对于非移动大小的屏幕大小是透明的 请帮忙。谢谢Html 仅更改移动屏幕的标题背景,html,jquery,css,twitter-bootstrap,frontend,Html,Jquery,Css,Twitter Bootstrap,Frontend,我正在尝试仅更改移动屏幕大小的标题背景色。下面的按钮不起作用 理想情况下,我不想更改标头或标头包装代码,因为这样可以正常工作。为了获得更多的上下文信息,如果需要的话,我使用了这个fiddle:但是有意地希望标题对于非移动大小的屏幕大小是透明的 请帮忙。谢谢 @media screen and (max-width: 480px) { .ico { width: 100px; height: 100px; } .header { background: #f
@media screen and (max-width: 480px) {
.ico {
width: 100px;
height: 100px;
}
.header {
background: #ffffff;
}
}
.ico {
height: 300px;
width: 300px;
position: fixed;
z-index: 999;
top: 30%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
margin-left: 15px;
margin-top: 16px;
}
header {
width: 100%;
height: 60px;
position: fixed;
top: -125px;
}
.header_wrap {
width: 100%;
height: 100%;
position: relative;
}
Fiddle:您的代码是有效的,但css不会以这种方式工作。只有最后提到的样式将应用于元素。让我解释清楚
.box{宽度:100px;高度:100px;背景:红色;}
.box{背景:绿色;}
你的例子和你的小提琴看起来很不一样。您希望标题是什么颜色?我希望它是白色(但仅适用于低于480px的)。否则是透明的。
header {
background: transparent;
}
@media screen and (max-width: 480px) {
header {
background: #FFF;
}
}