根据屏幕分辨率自动调整 div 大小

Question

我正在使用引导程序。我有标题，我希望标题 div 保持固定在它们的位置，只是减小文本大小或根据大“lg”、小“sm”、中“md”和超小“xs”。

这是我的代码

CSS：

     body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 1.428571429;
        color: #333;
        background-color: #B96060;
     }
    .header{
      height:100px;
      border:1px solid black;
     }

HTML：

   <body >
  <div class="row header">
     <div class="container">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-3 ">
                <img  src="../images/logo_icon.png"   border="0"                                   class="img-responsive"  >    
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <center><h2 nowrap>Bury pakk public school</h2><center>
            </div>
            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ">
                        <p>Logout</p>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 ">
                        <p>user : Khan</p>
                        <p>Access Level : Khan<p>
            </div>
        </div>  

      </div>
    </div>

   </body>
</html>

Answer 1

我认为你犯了一个错误。

• 第一行必须在容器内部而不是外部
• 无论何时你想加宽一列，你必须再次定义<div class = row>

你的 CSS 看起来像这样

 <div class="container header">
     <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div class="row">
            <div class="col-lg-3 ">
                <img  src="../images/logo_icon.png"   border="0"                                   class="img-responsive"  >    
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <center><h2 nowrap>Bury pakk public school</h2><center>
            </div>
            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ">
                        <p>Logout</p>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 ">
                        <p>user : Khan</p>
                        <p>Access Level : Khan<p>
            </div>
        </div>  
       </div> 
      </div>
    </div>

对于第二部分，有很多方法可以做到。使用媒体查询，根据渲染的屏幕大小更改文本大小。这是直接来自bootstrap site的代码

 /* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { 
  .header{
        font-size: 0.4em;
   }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { 
     .header{
        font-size: 0.7em;
   }
 }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {
  .header{
        font-size: 1em;
   } 
 }

我建议您阅读引导文档，否则您会遇到更多错误

Answer 2

您可以将'navbar-fixed-top' 类与.header 类一起使用。

对于字体大小，you can assign font ineminsted ofpx， 字体大小将根据设备的大小减小。 只有当您为正文字体大小编写媒体查询时，字体大小才会改变。 假设默认字体大小为 14 像素，如果您为正文编写了 12 像素，则在媒体查询中最大宽度为 767 像素。 在这种情况下，所有 em 字体都会缩小到某个百分比。