有关html5设计那些事，你真的考虑过前端的实现吗(最近别人常常问我这种问题，因此我就写一篇了，可能也有别人和我同样吐槽过)

好久之前在安卓2.0系统刚刚的时候就对HTML5比较关注！由于我也是那个时候刚刚入行作前端的。那个时候最大的乐趣就是看着w3plus上面各类css3的效果，以为哇，好牛逼原来能够这样作，而后3年过去了。。。手上的APP作完的没有40个也有30个了！而后去年参加了HTML5峰会。听着一批前辈们说着他们在html5的道路中遇到的挫折，经验，以及流行的框架，制做HTML5的ide。。。也算是小有经验了！。。。而后知道的越多，现实就越残酷（大漠居然说他不会JS，无语偶曾经的偶像居然说他真的不会js还发誓！this is so crazy）而后吐槽一下如今（现实就在脚下。。。）

 

如今么一个个朋友，之前离职的小伙伴，设计师们，都牛气冲天的说她们开始搞APP啦。要搞HTML5了

而后-_-//我只想吐槽大家对HTML5的了解到底是什么呢！

1.....某个刚刚离职的漂亮设计师妹子表示：她们如今作APP 和H5她们要求设计H5页面都是艺术字

 

我不得不吐槽！大家设计的页面肯定不是在坑人吗！....都是艺术字！你是准备让前端用canvas，载入字体搞呢，仍是根本这个字体就是手绘的用图片呢。。

 

（在他们的眼里或许html5就是让他们不用考虑兼容，能够随意发挥灵感的东西）

 

可是他们考虑过图片的重量，引入字体库的大小了吗！就算是最后打包成手机APP！这样的作真的合适吗！

 

若是最后只是一个webapp，他考虑过若是不在wifi的环境下用户使用的话会形成流量大量的浪费在加载图片和字体上

 

最后若是前端境界很高的话确实能够用linear-gradient制做出不少如本页底部的那些高大上的效果。可是我必须再泼一次冷水，只有safari浏览器也就是水果是彻底兼容的

 

Android4.0（至少我用的是安卓4.0是不彻底兼容）。。。

 

最后关于这个问题！ 我只想说当前端努力的哪怕从代码的体积哪怕是20K都在努力减小的同时，设计师们是否能考虑到大家作的那么多图片，是否也能减小点体积呢？

 

毕竟你作的只是一个产品的APP，原本就没什么人主动去下，除了你的客户无可奈何才去下！固然啦若是你的产品能火到别人即便是哪怕烧2M打开你一次页面或是离线

 

存储个20M的图片。那也无话可说。

 

 

 

2.....某漂亮的设计师问：如何设计出规范的移动端的效果图呢，前端工程师们是怎么实现他的呢

 

通常写webapp一共大概3种

 

第一种相似新浪的web页面。。。无脑全屏width：100%，电脑上看仍是100%

 

第二种相似微店网 。。。。。最大宽度680px.....能够下载微点网的手机客户端，打开的话是680的页面（最主要春节摇到20多块钱红包，因此下了一个）

 

 

第三种响应式布局（最精准的）设计师须要准备3个分辨率的效果图，而后打开一个页面而后根据屏幕宽度适配（如bootstrap）

 

剩下的要么比较神奇，要么比较逗比，我就不列举了

 

关于这个问题，通常来讲你要设计的都是单独的因此基本就是第一种和第二种了你只要设计680宽度的效果图

 

3.....某个小白前端问（设计的时候都是px）我应该用什么字体单位。。。。。没有定性！可是大部分官方都喜欢说EM。。。可是我表示PX用的好的话更加精准

 

4......我不得不吐槽.......千万不要随意为了作个手机网页设计左右横屏的效果

 

注意关键词网页   这个问题的关键是左右横屏会在网页上带来灾难性的后果！如，手机浏览器向左向右致使手机浏览器前进后退！！！

打包了我就懒得管了！毕竟phonegap，appcan各类各样的对这个问题都要足够的支持