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