有关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各种各样的对这个问题都要足够的支持