如何管理响应式文本大小和Bootstrap中的边距

发布于 2025-01-23 11:10:50 字数 647 浏览 0 评论 0原文

我在图像的顶部有一个文本，可以将文本放在图像上的正确区域上，如bellow中的图像，当我检查移动设备时，图像正在缩放以适合移动屏幕，但是文本更倾向于正确的（保持边距！保证金不会放大），并且文本大小不会放大。

如何在手机或其他屏幕尺寸上完成响应 /缩小？

<div class="container-fluid">
<div class="row" style="position: relative;">
 <img src="slogan.jpg" width="100%" style="z-index: -1;">
   <div class="mb-0 mb-md-3 mb-lg-0" style="z-index: 1;  position: absolute;margin-left: 300px;margin-top: 100px;">
     <p class="mainhead ">Header</p>
     <h1 class="mainh1">
            Line1 <br /> line2. <br />Line3!</h1>
   </div>
   
</div>
</div>

我有元视口

原文

I have a text on top of an image with margin to put the text on the correct area on the image as in the code bellow, when I check on mobile the image is zooming out to fit the mobile screen however the text is going more to the right (keeping the margin! the margins isn't zooming out) and text size isn't zooming out.

how can I accomplish the responsive / zoom out on mobile phone or another screen size?

<div class="container-fluid">
<div class="row" style="position: relative;">
 <img src="slogan.jpg" width="100%" style="z-index: -1;">
   <div class="mb-0 mb-md-3 mb-lg-0" style="z-index: 1;  position: absolute;margin-left: 300px;margin-top: 100px;">
     <p class="mainhead ">Header</p>
     <h1 class="mainh1">
            Line1 <br /> line2. <br />Line3!</h1>
   </div>
   
</div>
</div>

I have the meta viewport as

分享到QQ

分享到微博