HTML5前端开发有哪些优势?
1、跨平台。在多屏年代,开发者的痛苦指数非常高,人人都期盼HTML5能扮演救星。多套代码、不同技术工种、业务逻辑同步,这是折磨人的过程。跨平台技术在早期大多因为性能问题夭折,但中后期硬件能力增强后又会占据主流,因为跨平台确实是刚需。
2、快速迭代。移动互联网是一个快鱼吃慢鱼的时代,谁对用户的需求满足的更快,谁的试错成本更低,谁就拥有巨大的优势。
3、导流入口多。HTML5应用导流非常容易,超级App(如微信朋友圈)、搜索引擎、应用市场、浏览器,到处都是HTML5的流量入口。而原生App的流量入口只有应用市场。聪明的HTML5开发者当然会玩转各种流量入口从而取得更强的优势。
4、分发效率高。假如微信允许游戏在桌面创建快捷方式、假如游戏后续升级解决持续娱乐问题,未来不可想象。除了入口多、流量大,导流效率高也不可忽视,谁都知道:页游和端游打同样的广告,广告变用户的转化率,页游远远高于端游。
5、HTML5 对用户的好处是:和流量入口多、分发效率高相对应的。大幅降低使用门*。用户眼睛看到一个兴趣点,点击后,就应该立即开始满足用户需求。
网页布局常用的方式有这些:1.固定布局。为网页设置一个固定的宽度,通常以px做为长度单位;2.流式布局,为网页设置一个相对的宽度,页面元素的大小按照屏幕分辨率进行适配调整。
1、固定布局。为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页。
这种布局具有很强的稳定性与可控性,也没有兼容性问题,但不能根据用户的屏幕尺寸做出不同的表现。即如果用户的屏幕分辨率小于这个宽度就会出现滚动条,如果大于这个宽度则会留下空白。
2、流式布局(Liquid Layout)。为网页设置一个相对的宽度,页面元素的大小按照屏幕分辨率进行适配调整,但整体布局不变,通常以百分比做为长度单位(通常搭配 min-*、max-* 属性控制尺寸流动范围以免过大或者过小导致元素无法正常显示),高度大都是用px来固定住。流式布局的代表作是栅格系统(网格系统)。
例如设置网页主体的宽度为80%,min-width为960px。图片也作类似处理(width:100%, max-width一般设定为图片本身的尺寸,防止被拉伸而失真)。
缺点:因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样,显示非常不协调
3、栅格化布局。将网页宽度人为的划分成均等的长度,然后排版布局时则以这些均等的长度做为度量单位,通常利用百分比做为长度单位来划分成均等的长度。
比如像 bootstrap,foundation 这些框架采用的就是栅格系统,只要给页面元素添加其栅格系统指定的类名,就能达到想要的响应式布局效果。