移动平台开发需要的记录(续)

    这个星期导师继续让我熟悉移动端平台的开发，作业要求适配android的所以机子以及iphone4,4s,5。我对移动端的前端了解不多，所以我第一步就找一下资料。

　 1, 移动端资料

　　近期手机网页项目一些杂碎心得分享   (这里让我对图片的显示有了个更深的体会)。

　　设备像素比devicePixelRatio简单介绍  (这里让我对设备像素比有一个初步的认识)。

　　大杂烩 http://mobile.smashingmagazine.com/tag/css/ (smashing magazine都懂的)。

    2, 开始动工

　　以480来做为基准来书写HTML和CSS,字体基准大小是20px。除了border外，所有的数值单位使用em，数值根据设计稿量到的除以基准字体。为dips大于1.5的设备准备大一倍的背景图片。

　　当处理dips大于1.5的设备图片时，代码如下：

 　 @media only screen and (min-device-541px) and (max-device-800px),only screen and (min-541px) and (max-800px), only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio :1.5){

　　//为设备实际分辨率在541px到800px的设备或者dips大于1.5的设备 写的CSS

}

　　其他尺寸的屏幕设置对应字体大小:　

　　/* for 1080 px width screen */
　　@media only screen and (min-801px) and (max-1080px){
　　　　body{font-size:45px}
　　}
　　/* for 800 px width screen */
　　@media only screen and (min-720px) and (max-800px){
　　　　body{font-size:33px}
　　}
　　/* for 720 px width screen */
　　@media only screen and (min-641px) and (max-720px){
　　　　body{font-size:30px}
　　}
　　/* for 640 px width screen */
　　@media only screen and (max-device-640px),only screen and (max-640px){
　　　　body{font-size:27px}
　　}
　　/* for 540 px width screen */
　　@media only screen and (max-device-540px),only screen and (max-540px){
　　　　body{font-size:22.5px}
　　}
　　/* for 480 px width screen */
　　@media only screen and (max-device-480px),only screen and (max-480px){
　　　　body{font-size:20px}
　　}
　　/* for 320 px width screen */
　　@media only screen and (max-device-320px),only screen and (max-320px){
　　　　body{font-size:13.5px}
　　}

　　3, 测试

　　分享一些可以测试的网站(但是任何测试网站都比不上真机一试,看看就好).

　　http://mattkersley.com/responsive/

　　http://www.responsinator.com/?url=http%3A%2F%2F127.0.0.1%2Findex.html

　　注意一些可能手机浏览器不支持的CSS属性，有时候就需要使用上回说的iscroll.js来模拟。