【问题标题】:Iphone responsive website issueiPhone响应式网站问题
【发布时间】:2014-10-12 04:26:35
【问题描述】:

我正在创建一个新网站,这里是www.qldmetals.com

网站上的一切似乎都很好,除了它在 iPhone 上的响应能力。在 iPhone 中,徽标位于导航菜单上方。我尝试了以下媒体查询,但它似乎对我不起作用,即

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) { .logo a.brand { display: block !important; }}

我很困惑,这个错误是因为显示方法还是其他原因(比如我必须对任何其他类使用媒体查询)

感谢您的帮助和宝贵的时间。

谢谢。

【问题讨论】:

  • @MaryMelody 感谢您的帮助,但我找到了解决方案。谢谢你。干杯!!

标签: html css iphone responsive-design web


【解决方案1】:

我看过你的网站,然后我创建了一些我自己的样式元素,我正在分享它仅适用于媒体屏幕最大宽度 480 像素 以下代码

 @media (max-width:480px){
.logo a.brand {
    display: block !important;
    height: auto;
    line-height: 30px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: auto;
}

.logo a.brand img {
    float: none;
    height: auto;
    margin: 2px 8px 2px 0;
    width: 100%;
}

header .logo{
 float: none;
    max-height: none;
    text-align: center;
    width: 100%;
}


}

【讨论】:

  • 太棒了,这就像一个魅力!我将其更改为在横向模式下工作,因为它仅在纵向模式下工作 @media only screen and (min-device-width : 320px) and (max-device-width : 568px) { ,但是非常感谢您的帮助。干杯!!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-11-28
  • 2019-11-20
  • 2015-03-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多