标签:
年初就已经很明显的感受到移动潮的来临,可是一直迟迟没有动手,大概是自己一直对HTML5,CSS3还有JS的不够自信吧,可是问题一直不解决就会一直是问题。
现在几乎每个公司都需要发展移动端的业务和PC端也完全配套出,所以这个月的目标就是从零开始做一套简单的web app页面,在这个工程中记录学习,补充自己这方面缺章断节的知识块。
---------------------------------------------------------
看了移动前端开发之viewport的深入理解对于手机端的显示大小问题有了初步和整体的认识。在 移动web资源整理 看到一个不错的模板,以后大概会就这么沿用下去吧,其实很佩服那些专研问题并整理资源分享给我们这些小白学习的人,大概他们都有某种很强大的精神力量,现在我只能做一个资源收集者并努力去实践才是资源最好的利用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>标题</title> <link rel="stylesheet" href="index.css"> </head> <body> 这里开始内容 </body> </html>
有了对viewport的基本认识再加上这个模板,大概就可以从0跨出脚步了。
虽然chrome浏览器有针对各个设备的测试预览,可是还是没有手机上测试来得有实感,所以对于我这个连后台怎么也害怕碰的人连怎么在手机看东西都不知道……
问同事,他说要么弄一个模拟器要么发布在外网……好麻烦,看到叶小钗移动开发的第一篇文章丢的一个链接瞬间就开窍了,我只需要一个链接在手机上打开就行了啊,正好以前碰到过runjs这个东西,然后马上把代码丢进去把链接发到QQ里,在手机看到效果的第一眼真的很高兴,虽然无比的简单基础,但这是很重要的一步^_^ ,http://sandbox.runjs.cn/show/j4mpupoc
这个过程也明白了position:absolute绝对定位时可以不用设置100%的宽度也能实现100%的效果,就是设置left:0;right:0;
好了第一步就这样了,下一步就是好好的写一个有效果的页面出来,之前工作都是混日子看博客技术文也少,事实上自己的技能停滞了很久了,相信在学习移动知识的同事也会补充学习很多PC端知识的东西。
标签:
原文地址:http://www.cnblogs.com/chen7/p/4651460.html