Bootstrap框架中,字体不会自适应,及时使用rem都不行,那么就只有使用媒体查询来做。这样可能会有点麻烦,但是这是我目前找到的一个方法直接上代码了
div {
font-size: 12px;
-webkit-transition: font-size 0.2s ease-out;
} @media only screen and (max-width: 1200px) {
div {
font-size: 39px;
} .hb-size {
font-size: 39px;
} .ft-num {
font-size: 38px;
}
.hb-num {
font-size: 37px;
}
.hb-info
{
font-size: 12px;
}
} @media only screen and (max-width: 1100px) {
div {
font-size: 38px;
} .hb-size {
font-size: 38px;
} .hb-num {
font-size: 37px;
}
.hb-info
{
font-size: 12px;
}
} @media only screen and (max-width: 1000px) {
div {
font-size: 37px;
} .hb-size {
font-size: 37px;
} .hb-num {
font-size: 36px;
}
.hb-info
{
font-size: 12px;
}
} @media only screen and (max-width: 900px) {
div {
font-size: 36px;
} .hb-size {
font-size: 36px;
} .hb-num {
font-size: 35px;
}
.hb-info
{
font-size: 12px;
}
} @media only screen and (max-width: 800px) {
div {
font-size: 35px;
} .hb-size {
font-size: 35px;
} .hb-num {
font-size: 34px;
}
.hb-info
{
font-size: 12px;
}
} @media only screen and (max-width: 700px) {
div {
font-size: 30px;
} .hb-size {
font-size: 30px;
} .hb-num {
font-size: 29px;
}
.hb-info
{
font-size: 12px;
}
} @media only screen and (max-width: 600px) {
div {
font-size: 20px;
} .hb-size {
font-size: 22px;
} .hb-num {
font-size: 21px;
}
.hb-info
{
font-size: 12px;
}
} @media only screen and (max-width: 500px) {
div {
font-size: 22px;
} .hb-size {
font-size: 17px;
} .hb-num {
font-size: 13px;
}
.hb-info
{
font-size: 12px;
}
} @media only screen and (max-width: 400px) {
div {
font-size: 19px;
} .hb-size {
font-size: 15px;
} .hb-num {
font-size: 12px;
}
.hb-info
{
font-size: 12px;
}
} @media only screen and (max-width: 320px) {
div {
font-size: 16px;
} .hb-size {
font-size: 12px;
} .hb-num {
font-size: 12px;
}
.hb-info
{
font-size: 12px;
}
}