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

Question

我只是将 Logo 放在标题图像的顶部，在桌面上它是完美的，但如果我更改为移动设备，它会覆盖右侧 float 的菜单。

我想让它留在左 Angular ，但更小。

我的 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;
}

我需要做哪些额外的样式或更改才能使 Logo 变小并移动到移动设备的左上角？ The Actual reaction to the styling

Answer 1

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

这基本上会让您的应用根据屏幕大小使用react。

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

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

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