Change size of

tag when responsive Bootstrap

2019-08-19 10:23发布

站内问答 / HTML/CSS
1578 4 6

This question already has an answer here:

Is there any way to change the text size of <h1> tag when it goes on extra small or small screen size?

Because <h1> has its own default size which is normal for medium size but very large for small and extra small.

I want to change that size when it goes to small screen size or extra small screen size.

4条回答
来，给爷笑一个
2楼-- · 2019-08-19 10:40

It's just a basic example that shows how you can write your own CSS rule while you are using bootstrap or any other design framework.

for media query visit this CSS-trick

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<style>
/* My rule */

   h1{
      font-size:12px;
   }
   
</style>
<div class="container">
  <h1>Here is the heading</h1>
</div>

查看更多
0人赞 添加讨论(0) 举报
Evening l夕情丶
3楼-- · 2019-08-19 10:42

Try this code..

<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1{
@media screen 
and (min-device-width: 1200px) 
and (max-device-width: 1600px) 
{ 

          font-size: 100px;


}
@media screen 
and (min-device-width: 320px) 
and (max-device-width: 700px) 
{ 

          font-size: 25px;


}
}
 </style>

    <h1>My big company!</h1>


</html>

i hope it will help..

查看更多
0人赞 添加讨论(0) 举报
孤傲高冷的网名
4楼-- · 2019-08-19 10:56

You can create a custom .css file (for example: site.css) and then use @media to create different behavior on different screen size. To override the h1 class in bootstrap, you have to include your custom css after the bootstrap. Below is the example of h1 in site.css:

h1 {
  /* Extra small devices (phones, less than 768px) */
  font-size: 10px;

  /* Small devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    font-size: 12px;
  }

  /* Medium devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    font-size: 16px;
  }

  /* Large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {
    font-size: 18px;
  }
}

This is the @media rules which bootstrap currently use, the official docs can be seen in here.

查看更多
0人赞 添加讨论(0) 举报
做自己的国王
5楼-- · 2019-08-19 11:04

You can use Media Query for small screen size that will apply css for h1 only on the specified width. For example, See below code. You can modify it according to your needs. This code will go inside your styles.css file.

@media only screen and (max-width: 480px)  {
      h1 {
          font-size: 18px;
      }
}

For more info on media queries, visit Css Tricks. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)