制作响应式网页答案

【问题标题】：Making a responsive web page制作响应式网页
【发布时间】：2016-04-27 08:59:04
【问题描述】：

我正在开发响应式网络。我有一张图片，该图片前面有内容。但是，当我缩小或放大到最大宽度时，我发现内容（在这种情况下是文本）没有放在它的第一个位置。

您知道如何使网络更具响应性吗？我的意思是这里的响应是我们放大还是缩小，位置是一样的，但大小可能会改变。

任何想法将不胜感激。非常感谢！ *我已经在使用引导程序了

这里是代码示例：

<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>

【问题讨论】：

标签： css responsive

【解决方案1】：

我不确定我是否知道你在问什么，但请看一下这个以获得更响应的结构：

    <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>

【讨论】：

哇，伙计们，你怎么能那样做？你能给我一些关于这个的参考吗？它工作，谢谢
好吧，分解一下： - 图像会自动设置它的宽度，所以通过设置 max-width:100%，我们确保图像不能比屏幕宽 - H2 是绝对的，购买你没有使用上/左定位，但你使用边距定位（绝对位置的点是使用上/下/左/右属性）。通过将这些位置设置为百分比，它们在屏幕尺寸变化时（大致）保持其位置。 - 此外，div 必须有 position:relative;以确保它是相对于它的绝对儿童位置。在 w3schools 上查找位置和最大宽度。
好的，但是当我最小化屏幕或缩小/缩小屏幕时，大小文本不会跟随屏幕。这是我遇到的另一个问题。如何根据屏幕宽度自动更改文本的大小。谢谢
确实——对于缩放，字体大小应该相应地改变，但对于屏幕调整大小，你可能需要阅读 css 媒体查询——它们非常易于使用，并且几乎所有浏览器都支持（虽然不是像 ie8 这样的旧浏览器）。您可以使用媒体查询来影响某些屏幕尺寸的字体。

【解决方案2】：

不太确定您的问题到底是什么。你想要文本和/或图像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>

【讨论】：