手机页面开发 --对于不同分辨率字体的处理

最新推荐文章于 2024-12-11 15:16:29 发布

baisui1866

最新推荐文章于 2024-12-11 15:16:29 发布

阅读量163

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jinTaylor/p/4552217.html

本文介绍了一种针对不同屏幕分辨率调整字体大小的方法，通过使用CSS媒体查询，为各种设备提供最佳阅读体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在手机页面的开发过程中，会发现一个问题，字体如果设置固定的px em 导致大点分辨率的字体就小，小点分辨率的字体就过大，处理这类问题

针对不同的浏览器设置不同的字体大小

@media only screen and (max-width: 800px) { p{ font-size: 19px;}.footer{font-size: 18px;}.contextTitle{font-size: 21px;}}
@media only screen and (max-width: 640px) { p{ font-size: 18px; }.footer{font-size: 17px;}.contextTitle{font-size: 20px;}}
@media only screen and (max-width: 600px) { p{ font-size: 17px; }.footer{font-size: 16px;}.contextTitle{font-size: 19px;}}
@media only screen and (max-width: 560px) { p{ font-size: 16px; }.footer{font-size: 15px;}.contextTitle{font-size: 18px;}}
@media only screen and (max-width: 500px) { p{ font-size: 15px; }.footer{font-size: 14px;}.contextTitle{font-size: 17px;}}
@media only screen and (max-width: 460px) { p{ font-size: 14px; }.footer{font-size: 13px;}.contextTitle{font-size: 16px;}}
@media only screen and (max-width: 400px) { p{ font-size: 13px; }.footer{font-size: 12px;}.contextTitle{font-size: 15px;}}
@media only screen and (max-width: 360px) { p{ font-size: 12px; }.footer{font-size: 11px;}.contextTitle{font-size: 14px;}}
@media only screen and (max-width: 300px) { p{ font-size: 11px; }.footer{font-size: 10px;}.contextTitle{font-size: 13px;}}

转载于:https://www.cnblogs.com/jinTaylor/p/4552217.html