移动平台开发需要的记录(续)_html/css_WEB-ITnose
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-width:541px) and (max-device-width:800px),only screen and (min-width:541px) and (max-width: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-width:801px) and (max-width:1080px){
body{font-size:45px}
}
/* for 800 px width screen */
@media only screen and (min-width:720px) and (max-width:800px){
body{font-size:33px}
}
/* for 720 px width screen */
@media only screen and (min-width:641px) and (max-width:720px){
body{font-size:30px}
}
/* for 640 px width screen */
@media only screen and (max-device-width:640px),only screen and (max-width:640px){
body{font-size:27px}
}
/* for 540 px width screen */
@media only screen and (max-device-width:540px),only screen and (max-width:540px){
body{font-size:22.5px}
}
/* for 480 px width screen */
@media only screen and (max-device-width:480px),only screen and (max-width:480px){
body{font-size:20px}
}
/* for 320 px width screen */
@media only screen and (max-device-width:320px),only screen and (max-width: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来模拟。
上一篇: javascript有什么优点
下一篇: mysql如何自动生成大量数据
推荐阅读
-
推荐:Web开发者的六个代码调试平台_html/css_WEB-ITnose
-
跨平台移动开发 Xuijs超轻量级的框架+Emile CSS动画_html/css_WEB-ITnose
-
每个Web开发者都需要具备的9个软技能_html/css_WEB-ITnose
-
移动端开发,几个你可能不知道的CSS单位属性。_html/css_WEB-ITnose
-
移动H5开发入门知识,CSS的单位汇总与用法_html/css_WEB-ITnose
-
开发一个基于纯网页的棋牌游戏,需要掌握那些技术?_html/css_WEB-ITnose
-
从中间件的历史来看移动App开发的未来 中间件html5javascriptDeviceOne跨平台
-
移动H5开发入门知识,CSS的单位汇总与用法_html/css_WEB-ITnose
-
每个Web开发者都需要具备的9个软技能_html/css_WEB-ITnose
-
DCloud产品HTML5跨平台APP开发的利器_html/css_WEB-ITnose