移动web页面前端开发总结.docVIP

和css3技术吧。 在开始编写webapp时，前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序 的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域 可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。 3.终端分辨率 手机分辨率比PC分辨率要庞杂得多，各种分辨率有木有？大小差距那么大有木有？这在一定程度上给页面制作带来了不小的麻烦。所以针对这样的因素，必须有充分的考虑。考虑到浏览器自适应，需要设计和制作完成各种不同的方法。 1) 市场上主流手机生产商的产品分辨率。经过调研发现，目前主流的手机分辨率为：480*800像素、320*480像素，而1280*720像素（720P）会是接下来的趋势。这些都是很粗略的统计，要有精确的数据需要花费不少的精力，那是数据分析人员的工作。 2) 项目目标群所持设备的分辨率。项目目标群即用户，用户拥有什么样的手机分辨率，从一定程度上来说比第一点来得更加重要，它决定着项目开发的方向。 4.响应式web开发 在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付 宝 采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示，你无需再次考虑设备的分辨率。 响应式web开发不是一项开创性的技术变革，简单地说，响应式web设计采用了媒体查询、流式布局、液态图片三项技术，把它们组合在一起来制作页面，使得页面不只在传统桌面，在平板电脑和手机上，各种不同的分辨率都能够完美显示。而要做到这点，我觉得不难，请继续往下： 1) 准备工作： a) 插件安装：window resize。您可以通过以下链接 /webstore/search-extensions/window%20resize下载安装谷歌浏览器插件，安装成功后，当您调整浏览器窗口时，在浏览器右下角会有灰度提示当前窗口和类似于手机视口的大小提示。截图如下： b) 编辑器安装：subline Text2（支持html5，安装css3扩展失败）、topStyle5（支持css3）。 c) 弄清视口和屏幕的区别。视口是浏览器的内容显示区域，屏幕是设备的物理显示区域。比如视口宽度我们一般用width表示，而屏幕宽度是用device-width来表示。相信做过手机页面的童鞋都经常见过这段代码： meta name=viewport content=width=device-width,initial-scale=1.0 其中width=device-width就是说把页面宽度设置成和屏幕宽度一样。 d) 响应式设计创意网站收集： 。这里有很多响应式Web设计的网站，供您参考和学习。 2) 征途ING： e) 响应式web设计之媒体查询： 为了减少http请求，我想在css样式表里进行媒体查询会是个不错的选择，而不是在页面head部分使用link进行加载。样式表里的媒体查询格式为： @media screen and (max-width:960px){} 大括号内部书写样式。该语句相当于判断语句，有两个条件，一个是视口宽度最大不超过960px，screen代表显示屏，这两个条件都具备了，就调用大括号内的样式。 f) 响应式web设计之流式布局： 流式布局以百分比进行布局。最重要是时刻关注元素的父级层，所有的元素都是以父级层为基准。流式布局的应用是为了和媒体查询完美地结合，形成平滑的布局变 化跳转效果。一般而言，media里的样式多以width、padding、margin、font-size、line-height这些为主。 g) 响应式web设计之液态图片： 要实现液态图片，只需加入如下代码：img{max-width:100%;} web移动头部书写1 !DOCTYPE html PUBLIC -//WAPFORUM//DTD XHTML Mobile 1.0//EN /DTD/xhtml-mobile10.dtd html xmlns=/1999/xhtml head title首页/title meta name=keywords content=首页关键字 / meta name=description content=首页描述 / meta http-equiv=Content-Type content=text/html; charset=utf-8 / meta http-equiv=