当设备尺寸较小时，将不会包含 <Div> 部分

Posted 2023-03-05

【中文标题】当设备尺寸较小时，将不会包含 <Div> 部分

【英文标题】：A <Div> section will not stay contained when device size is smaller

【发布时间】：2019-06-29 14:46:11

【问题描述】：

当我的网页的屏幕尺寸在平板电脑/移动设备上时，顶部 div 会溢出其空间并与屏幕的另一部分重叠。我正在使用引导网格，所以也许我错误地使用它们？任何帮助都可以挽救生命。

1st Screenshot showing correct placing on a desktop PC

2nd Screenshot showing incorrect placement on an iPhone

    <div class="container mt-5">
    <div class="row no gutters header text-left mt-5">
        <div class="col-sm-12">
            <h1 id="testing-1" class="display-4 text-left">Digital Study Skills Tutor</h1>
            <p class="lead">Free self-help study skills resources for university students</p>
            <a class="btn btn-lg btn-primary" href="signup.php">Sign Up</a>
        </div>  
    </div>
</div>



    .site-header 
  background: url(img/home-header.jpg) no-repeat center;
  background-size: cover;
        

.site-header .layout-hero 
  min-height: 100vh;


    .display-4 
  font-size: 2.25em;
  font-weight: 500;
  color: white;

【问题讨论】：

你能提供这个网页的链接吗？我无法重新创建您的屏幕截图中提供的这种场景

【参考方案1】：

我无法创建这个场景，但我会试一试。您需要使用媒体查询来重新设置页面上的组件样式，以便文本和按钮不会在下一个 div 中溢出。您可能需要缩小字体并缩小按钮尺寸以适应小屏幕尺寸。继续调整以下媒体查询中的字体大小和按钮尺寸以获得所需的结果。媒体查询用于重新定义不同屏幕尺寸的样式。这是为响应式网页设计设置页面样式的好方法。 Media Query

小屏幕的媒体查询示例：

@media (max-width:576px) 
  .testing-1 
        font-size:x;
    
   .lead 
        font-size: y;
    
    .btn-lg .btn-primary 
        width: z;
    

【讨论】：

你好 Yash，非常感谢你在这个问题上的帮助，稍微改变了尺寸等，我设法进入了页面的顶部隔间。非常感谢！！！ :-)

没问题！我建议将来更多地研究响应式设计的媒体查询。

如果您觉得我的回答有帮助，也请点赞。

甜蜜！媒体查询获胜！