css中缩放后字体偏上 |css3选项卡特效

/* 原始的样式 */
p {
font-size: 16px;
margin: 0;
padding: 0;
}
/* 缩放后的样式 */
@media only screen and (max-width: 600px) {
p {
font-size: 12px;
}
}

在上面的代码中，大家设置了一个

标签的字体大小为16像素。在缩放页面时，大家使用了@media查询来调整字体大小。当视口小于600像素时，大家将字体大小设置为12像素。

然而，当大家打开缩放后的页面时，会发现字体有些偏上。这是因为大家只改变了字体大小，但没有改变

标签的行高。因此，字体相对于行高的位置发生了变化。

为了解决这个问题，大家可以在@media查询中设置行高为字体大小的1.5倍：

@media only screen and (max-width: 600px) {
p {
font-size: 12px;
line-height: 18px;
}
}

通过设置行高，大家可以解决缩放后字体偏上的问题。如果在缩放后仍然存在问题，可以通过调整行高来进一步优化页面的显示效果。