制作响应式网页

我正在响应式网页上工作。我有一张图片，内容在该图片前。但是，当我缩小或放大到最大宽度时，我发现内容（在本例中是文本）没有放在第一个位置。制作响应式网页

你有什么想法如何让网页更具响应性？我的意思是这里的响应是我们放大还是缩小，位置将是相同的，但尺寸可能会改变。

任何想法将不胜感激。十分感谢！ *我已经在用引导

下面的代码示例：

<div class="image-one"> 
     <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" style="padding:5px"/> 
     <h2 style="vertical-align:middle;margin-left:150px;margin-top:-150px;position:absolute;color:#ff0000">Kuta</h2> 
</div>

来源

2016-04-27 Mark Vullen

不知道我有一个线索，你问什么，但看看这个反应更加灵敏结构：

<div class="image-one" style="position: relative;display: inline-block;"> 
     <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" style=" max-width:100%; "> 
     <h2 style="vertical-align:middle;left: 31.5%;top: 50%;position:absolute;color:#ff0000;">Kuta</h2> 
    </div>

来源

2016-04-27 09:05:31

哇，你怎么能这样做？你可以给我一些参考。它的工作，谢谢 –

好吧，打破它： - 图像将自动设置它的宽度，所以通过设置最大宽度：100％，我们确保图像不能比屏幕更宽 - H2是绝对的，购买你没有使用顶部/左侧定位，但你使用边距来定位（绝对位置的点是使用顶部/底部/左/右属性）。通过将这些位置设置为百分比，他们保持其位置（粗略）在屏幕尺寸变化。 - 此外，div必须具有position：relative;以确保它是绝对的儿童相对于它的位置。在w3schools上查找位置和最大宽度。 –

没问题，但是当我最小化屏幕或将其缩小/放大时，尺寸文本不会跟随屏幕。那是我得到的另一个问题。如何根据屏幕宽度自动更改文字大小。谢谢 –

不完全确定你的问题到底是什么。你想要文字和/或图像rezie？也许这会帮助你：

<div class="image-one" style="background-image:url('http://sachinchoolur.github.io/lightslider/img/cS-1.jpg');background-size: contain;background-repeat: no-repeat; position: relative;width: 100%;height: 100%;"> 
     <div class="centered_text" style="position: absolute;top: 50%; left: 50%;transform: translate(-50%,-50%);"> 
      <h2 style="color:#ff0000">Kuta</h2> 
     </div> 
</div>

来源

2016-04-27 09:34:12 Michael

好吧，我会试试看。谢谢。 –

制作响应式网页

回答

相关问题