如何强制我的徽标在移动设备上变小并位于左上角？

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*/
}

如何强制我的徽标在移动设备上变小并位于左上角？

How can i force my logo to be smaller and on top left on mobile devices?

html

css

mobile

image

styling