有關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各類各樣的對這個問題都要足夠的支持