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

Question

我用的是引导。我有标题，我希望标题div保持固定在他们的位置只是文字大小减少或根据大"lg"，小"sm“中的"md”和xtra小"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

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

而对于字体大小，you can assign font ineminsted ofpx，字体大小将随着设备的大小而减小。字体大小只有在编写正文字体大小的媒体查询时才会更改。假设默认字体大小为14 ve，如果您为body编写了12 ve，则在媒体查询中，最大宽度为767 ve。在这种情况下，所有em字体都会缩小到一定的百分比。

Answer 2

我觉得你犯了个错误。

• 第一行必须在容器内，而不是在外部。
• 每当您想要宽列时，必须再次定义<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>

对于第二部分，有很多方法可以做到。使用媒体查询，可根据呈现的屏幕大小更改文本大小。下面是直接来自自举站点的代码

 /* 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;
   } 
 }

I建议您通过引导文档，否则会出现更多的错误。