Question

我试图为手机制作一个响应式页面，当视口非常小时（即肖像中的小屏幕），它会响应。标题中有三个元素，一个＆＃39;汉堡包＆＃39;用于菜单，徽标/主页链接和篮子图标。用户能够使用菜单和购物篮按钮非常重要，并且当视口宽度太小而无法容纳所有内容时，我试图让徽标缩小。

目前，当宽度缩小时，图像会下降到下一行，而不是缩小到缩放。

标记：

<header>
  <div class="btn-menu">
    <a href="" id="menubutton">
      <img src="http://www.dabs.com/images/theme/mobile/dabs_com_v3/en/buttons/btn-menu3.png">
    </a>
  </div>  
  <div class="btn-home">
    <a href="/" class="logo">
      <img alt="Home" src="http://www.dabs.com/images/theme/mobile/dabs_com_v3/en/layout/logo-new.png">
    </a>
  </div>
  <div class="btn-basket">
    <a href="/basket" id="basketbutton" class="header-button">
      <img alt="Basket" src="http://www.dabs.com/images/theme/mobile/dabs_com_v3/en/buttons/btn-basket2.png">
    </a>
  </div>
</header>

CSS：

header {
  position: relative;
  text-align: center;
  z-index: 10001;
  background-color: #fff;
  border-bottom: 8px solid #cc0033;
  height: 48px;
  overflow: hidden;
  width: 100%;
}
header div.btn-home > a, img {
  height: auto;
  max-width: 100%;
}
div.btn-menu {
    display: inline-block;
    float: left;
    width: 48px;
}
div.btn-home {
    display: inline-block;
    max-width: 199px;
}
div.btn-basket {
    width: 60px;
    display: inline-block;
    float: right;
    position:
}

btn-menu和btn-basket上的固定宽度是有意的，我不希望它们改变，只有btn-home需要响应视口大小。

这是示例的fiddle。我添加了一个带有CSS宽度过渡的按钮来模拟视口缩小。在生产中，它应该渲染到适当的大小，并在横向和纵向之间切换时更改。溢出：隐藏被禁用以显示图像的最终位置。

Answer 1

我拿了你的代码并修改了一下。 以下是JSFiddle的解决方案：http://jsfiddle.net/rmdymm55/

说明

我在标题中添加了一个最大高度，但这不是必需的，我只是练习了。

我完全删除了这个：

header div.btn-home > a, img { height: auto; max-width: 100%; }

因为我选择以这种方式声明：

div.btn-home img { max-width: 40%; margin-left: -50px; }

两者都应该有效，但我的应用程序更具选择性。只有<div class="btn-home">内的图片。注意我是如何做左边缘的：-50px。当它缩小时就是这样，徽标仍然居中。真正的技巧包就是Home按钮所在的位置。您必须在.btn-home img：
上执行以下操作
display: inline; /* This will keep it in one line */ width: auto; /* for resizing */ height: auto; /* for resizing */ position: relative; /* to keep it in place */

对于div.btn-basket，您必须添加：

position: absolute;

在div.btn菜单上你必须添加：

position: relative;

这将正确定位图像，使它们不重叠，无缝移动，不会进入下一行。

响应式CSS;图像移动到下一行而不是收缩

1 个答案: