巅峰霸主 > 设计开发 > bootstrap技术分享 >

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文件里面即可。

(责任编辑:陆柏熺)
评价:
用户名: 验证码: 看不清?点击更换


关注站长自媒体 获取更多优质内容

  • 百家号
    百家号
  • 头条号
    头条号
  • 企鹅号
    企鹅号

2019-2021 ©巅峰霸主网 京ICP备12023415号-2
返回
顶部