gpt4 book ai didi

wordpress - 为什么这个响应式 CSS 不起作用?

转载 作者:行者123 更新时间:2023-11-28 13:38:00 25 4
gpt4 key购买 nike

我正在尝试通过添加页面宽度的图形横幅和类型处理来修改 Portfolio Page Wordpress 主题。这是一个响应式主题,但我显然把事情搞砸了。 css 在 x 轴上使用背景重复来为全屏重复一些木板,然后在其上放置其他图形,这些图形会响应地居中。这是我正在谈论的 css:

#bgImageCornerTL
{
position:relative;
top:0px;
left:0px;
margin-top:0px;
height: 274px;
width: 100%;
z-index: 10;
background-image:url(http://chalupaholics.com/bob/wp-content/uploads/2012/10/PanelWStripe.png);
background-repeat:repeat-x;
background-position: center center;
}
#LogoContent {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -250px;
width: 872px;
height: 198px;
z-index: 12;
background-repeat: no-repeat;
background-image: url("/bob/wp-content/uploads/2012/10/BufBobwords.png");
opacity: 0.9;
}

重复在 iphone 上不起作用。所以,我写了一些应该通过“媒体”查询运行的 css,但我的 iPhone 没有接收到它,页面看起来仍然不对。 (对于 iphone,我使用单个图形作为页眉,图形和木板被压平成一个图形。)有人能发现我做错了什么吗?这是 CSS:

@media screen and (max-device-width: 480px) {

{
#bgImageCornerTL
{
position:relative;
top:0px;
left:0px;
margin-top:0px;
height: 147px;
width: 100%;
z-index: 10;
background-image:url(http://chalupaholics.com/bob/wp-content/uploads/2012/10/TopBannerIphone.png);
background-repeat:no-repeat;
background-position: center center;
}
#LogoContent,#Tasty,#Address,#Order {
display:none;
}

}

等等……

这里是 header.php 文件的相关区域,我在其中添加了一些 div 来处理新图形:

<div id="bgImageCornerTL"></div>
<div id="navwrap"></div>
</head>

<body>

<div id="LogoContent">
<div id="Tasty"></div>
<div id="Address"></div>
<div id="Order"></div>
</div>



<div id="wrapper">

等等...它在普通尺寸的屏幕上看起来不错,但在 iphone 上就坏了。我还没有尝试过其他设备。

这是网址,如果你想看一看:

http://www.chalupaholics/bob/

谢谢

最佳答案

您在媒体查询中的#bgImageCornerTL 选择器上方有一个额外的“{”

关于wordpress - 为什么这个响应式 CSS 不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12739091/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com