我在使用绝对定位时遇到了响应式设计的一些问题。我有一个 container-div,其中包含一个图像和一个 inner-div。通过绝对定位,我把inner-div放到了图片的前面。
<div class="outer-div" style="position: relative">
<img src="image.jpg" />
<div class="inner-div" style="position: absolute; top: 10px;">
<p> text here </p>
</div>
</div>
问题是,当我在移动设备上查看此页面时,内部 div 和文本按比例缩小。这不是预期的效果。在较小的屏幕上,我希望字体大小保持不变(这意味着它将覆盖更多屏幕)。
奇怪的是,在 Chrome 上,如果我调整浏览器大小,没有问题。但是,如果我在开发者工具(Windows 上为 Ctrl+Shift+C)下点击移动 View ,它就会缩小。
有谁知道我该如何避免这个问题?
最佳答案
将此元标记添加到您的文档头部:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
关于html - CSS - 绝对定位的移动响应问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40206935/