Question

我只是将徽标放在我的Header-Image顶部，在桌面上它是完美的但是如果我改为移动它覆盖了浮动在右侧的菜单。

我想保持它留在左角，但更小。

我的php看起来像这样：

<a href="/"> <id="logo"><img class="img-logo" src="<?php echo TEMPLATE_DIR; ?>/images/logo.png" width="180" alt="logo"></a>

   <img class="headerpic" src="<?php echo TEMPLATE_DIR; ?>/images/headspacer.jpg" alt="" />
        <div class="infobox"><div class="inner">    
    </div>

和造型目前是这样的：

.img-logo{
position:absolute;
top: 120px;
left: 250px;

}

.header img.headerpic  { 
    max-width:100%; 
    top: 0px;
    left: 0px;
    position: relative !important;
    z-index: -1500;
}

我需要做些什么样式或更改才能让徽标变得更小并移动到手机左上角？ The Actual reaction to the styling

Answer 1

您是否尝试使用视口http://www.w3schools.com/css/css_rwd_viewport.asp

这基本上会使您的应用根据屏幕大小做出反应。

测试此行为的一个提示是使用Google Chrome控制台，因为它允许您根据设备类型更改视口大小。

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

 /* Your css for smaller screen here */
}
@media screen and (min-width: 830px) {
/*Your css for bigger screen here*/
}

如何在移动设备上强制我的徽标变小？

1 个答案: