• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
守恪
恪守初心
博客园    首页    新随笔    联系   管理     
手机页面开发 --对于不同分辨率字体的处理

在手机页面的开发过程中,会发现一个问题,字体如果设置固定的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;}}

posted on 2015-06-04 16:30  守恪  阅读(400)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3