Question

我正在尝试在下面发布的图片中实现以下内容。当我调整浏览器大小时，我希望图像和按钮的大小减小，但与主背景保持相同的比例。我还希望文本不与图像重叠，因此字体大小应该变小。我怎样才能在CSS中实现这一目标？见图像：http://i.imgur.com/2qR2y4E.png

这是我认为应该正确的HTML代码。我试过CSS的绝对定位图像，我试过浮动每个元素并使用百分比宽度。如果它达到移动宽度，我只会在图像上显示：none但保留按钮。任何帮助表示赞赏。

<div class="content">
  <div class="text>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
  </div>
  <div class="image">
    <img src=".." />
    <div class="button"></div>
  </div>
</div>

Answer 1

我根据Jake的链接创建了一个小提琴 - http://jsfiddle.net/GkrpR/2/ 调整屏幕大小时，它会更改图像和文本框的大小。这有点粗糙，因此需要您更改css值以满足您的需求。但对你来说应该是一个好的开始。

它使用css中的媒体查询来检查最大屏幕大小，然后根据它更改样式。

例如，当屏幕尺寸达到300px或更低时，使用以下样式：

@media screen and (max-width:300px){     
    .image img{width:45px;height:50px;}
    .text{height:30px;font-size:6pt;color:#aaf;}
    .main{width:100px;}
}

希望这有帮助

带图像的响应式CSS

1 个答案: