iPhone响应式网站问题

Question

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

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

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

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

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

谢谢。

Answer 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%;
}


}