您的位置:首页 > 其它

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

2015-06-04 16:30 465 查看
在手机页面的开发过程中,会发现一个问题,字体如果设置固定的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;}}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: