网站响应引导程序，文本不响应 [英] Website responsive with bootstrap, text isn't

问题描述

好吧，我制作了一些制作网站的代码;



HTML

 <   div    类  =  jumbotron-middle >  
 <   div     class   =  container  >  
 <   h1     class   =  h1-2    align   =  center >  
 M <   span     class   =  letter2 >  <   / span  >  KING <   br  >  
 IMP <   span     class   =  letter2 >  O <   / span  >  SSIBLE <   br  >  
 P <  < span class =code-leadattribute> span     class   =  letter2 >  O <   / span  >  SSIBLE。 
 <   / h1  >  
 <   hr  >  
 <   / div  > ;  
 <   / div  >  

CSS

。 jumbotron-middle  {
  background-color  ：  #fff;  
  height  ：  700px;  
} 

现在出现问题，它根本没有响应！如果我把页面缩小一半或者我在手机上查看它的文字只是削减....



任何提示？



我尝试了什么：



不多，因为我是新编码的。

解决方案

使用 CSS媒体查询 [ ^ ]至根据浏览器窗口的宽度调整文本大小。



您需要确定文本在相关断点处的大小。例如：

。 jumbotron-middle   h1  {
  font-size  ：  1.2 em;  
} 
  @ media  （min-width： 480px）{
 。  jumbotron-middle   h1  {
  font-size  ：  2em;  
} 
 }  
  @ media  （min-width： 768px）{
 。  jumbotron-middle   h1  {
  font-size  ：  3em;  
 } 
 }  

演示 [ ^ ]

更改

< div class =jumbotron-middle> 

to

< div class =jumbotron jumbotron-middle> 

确保正确设置引导程序。看看这个：引导您的网页1 - 做好准备 [< a href =http://www.codeproject.com/Articles/1078527/Bootstrapping-Your-Web-Pages-Getting-Readytarget =_ blanktitle =New Window> ^ ]

Well, I made up some code for making a website;

HTML

<div class="jumbotron-middle">
    <div class="container">
        <h1 class="h1-2" align="center">
            M<span class="letter2">A</span>KING<br>
            IMP<span class="letter2">O</span>SSIBLE<br>
            P<span class="letter2">O</span>SSIBLE.
        </h1>
        <hr>
    </div>
</div>

CSS

.jumbotron-middle {
    background-color: #fff;
    height: 700px;
}

Now the problem, it isn't responsive at all! if I make the page half or if I look it on my phone the text just cuts of....

Any tips?

What I have tried:

Not much because I'm new into coding.

解决方案

Use CSS media queries[^] to adjust the text size based on the width of the browser window.

You'll need to decide what size you want the text to be at the relevant breakpoints. For example:

.jumbotron-middle h1 {
  font-size: 1.2em;
}
@media (min-width: 480px) {
  .jumbotron-middle h1 {
    font-size: 2em;
  }
}
@media (min-width: 768px) {
  .jumbotron-middle h1 {
    font-size: 3em;
  }
}

Demo[^]

Change

<div class="jumbotron-middle">

to

<div class="jumbotron jumbotron-middle">

Make sure you set up your bootstrap correctly. Check this out: Bootstrapping Your Web Pages 1 – Getting Ready[^]

这篇关于网站响应引导程序，文本不响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！