bootstrap h1~h6标签重置通用字体大小
时间:2020-11-26 01:35:32
来源:巅峰霸主网
作者:烈火大地 点击:
次
摘要：bootstrap默认H标签字体太大，对于英文网站来说直接使用某一问题，但是对于中文网站，h1~h6字体真的太大了一些，每次使用到h1标签总是想要调整字体大小，这里整理了一下通用的大小……
bootstrap H1~H6标签默认字体大小：
h1, .h1 {
font-size: 2.5rem;
}
h2, .h2 {
font-size: 2rem;
}
h3, .h3 {
font-size: 1.75rem;
}
h4, .h4 {
font-size: 1.5rem;
}
h5, .h5 {
font-size: 1.25rem;
}
h6, .h6 {
font-size: 1rem;
}修改之后，这样所有的h标签就可以直接使用了，一劳永逸，在之后网站特殊用到的地方极个别需要修改字体大小，其他的都不需要自定义了。
h1{font-size: 1.75rem !important;}
h2{font-size: 1.6rem !important;}
h3{font-size: 1.5rem !important;}
h4{font-size: 1.25rem !important;}
h5{font-size: 1.2rem !important;}
h6{font-size: 1rem !important;}对于响应式网站，还需要考虑到移动端小屏幕上的字体大小问题，如果直接使用PC端的H标签字体大小，会显得有那么一点大，所以还需要重新定义一些移动端的字体大小，把移动端设置得稍微再小一些。
@media(max-width:768px){
h1{font-size: 1.5rem !important;}
h2{font-size: 1.4rem !important;}
h3{font-size: 1.3rem !important;}
h4{font-size: 1.25rem !important;}
h5{font-size: 1.2rem !important;}
h6{font-size: 1rem !important;}
}将上面的代码放在你的bootstrap文件里面，或者自定的css文件里面即可。
