body { font-size: 16px; } @media only screen and (max-width: 767px) { body { font-size: 14px; } } @media only screen and (max-width: 374px) { body { font-size: 12px; } }
在上述代码中,大家首先设置了 body 元素的字体大小为 16 像素。在移动设备上,大家使用了媒体查询(media query)来设置不同屏幕尺寸下的字体大小。使用媒体查询,大家可以根据屏幕尺寸来设置不同的字体大小。
在上面的代码中,大家设置了两个媒体查询。第一个媒体查询针对的是屏幕宽度小于等于 767 像素的设备。这个范围包括了大部分智能手机和平板电脑。在这个媒体查询中,大家将 body 的字体大小设置为 14 像素。第二个媒体查询针对的是屏幕宽度小于等于 374 像素的设备,这个范围包括了一些小型的智能手机。在这个媒体查询中,大家将字体大小设置为 12 像素。
使用上述方式可以解决移动设备屏幕分辨率不同导致字体大小不一致的问题,从而提升用户的阅读体验。