想要打造一個優質的前端頁面效果，兼容性問題一定是首先要考慮的，這是一個前端頁面的根本，更何況現在有手機、平板、電腦各種各樣的終端設備，還有多種類型的瀏覽器，那么怎樣才能處理好兼容性問題呢？

首先，采用響應式頁面設計，智能地根據用戶行為以及使用的設備環境進行相對應的布局。需要利用CSS3的媒體查詢Media Queries和Viewport來解決問題，使設備的寬度作為視圖寬度并禁止初始的縮放。比如我們公司做的餐飲行業的掌勺兒項目，就采用響應式頁面設計，通過CSS3對頁面進行標記，從而可以在手機、平板、電腦等各個設備終端都能很好的體驗掌勺兒網的網站。

▲響應式頁面設計：對各個設備進行相對應的布局

其次，注意各個瀏覽器之間的兼容性問題。現在，瀏覽器的種類越來越多，不同的瀏覽器對同一段代碼又有不同的解析，所以，很容易造成頁面顯示效果不統一的情況。為了保證瀏覽器的兼容性，這就需要針對不同的瀏覽器進行CSS Hack。CSS Hack 就是針對不同瀏覽器寫出不同的CSS代碼的過程。

▲符合多個瀏覽器的兼容

然后，兼容性問題不僅僅是要網站頁面在各個瀏覽器上能夠顯示，還要注意網站的加載速度和程序功能的正常實現。這些都是需要前端開發工程師考慮的，這就對前端開發工程師的職業素養有很大的要求。

最后，反反復復的兼容性測試，只為讓客戶有一個非常好的體驗。我們公司的前端開發工程師對不同尺寸的終端設備與瀏覽器兼容做了大量的測試，然后再一點點調試，做測試與調優花的時間，可能比開發時間還要多，雖然這樣會投入大量的時間和精力，但最終的效果會很好。

保證頁面良好的兼容性肯定跟技術是分不開的。而且現在技術更新迭代的速度越來越快，作為以技術為核心發展力的網開億面公司來說，當然要保持所有的前端技術都是最前沿的主流技術。

▲最前沿的主流技術

第一，使用最新的超文本標記語言HTML5。HTML5代表著未來的趨勢，它最大的有優點在于可以跨平臺使用，這對瀏覽器的兼容性是有很大的幫助的。能夠提高可用性和改進用戶的友好體驗，并且標簽<video>和<audio>可以實現視頻的播放，可以很好的替代FLASH和Silverlight。HTML5更適合網站的抓取和索引，利于進行SEO。

第二，使用最新的層疊樣式表CSS3。CSS3比以前的版本多了一些新的可用的選擇器和屬性，可以實現新的設計效果（譬如動態和漸變），并且能夠更好地被搜索引擎收錄，由于將大部分的HTML代碼和內容樣式寫入了CSS文件中，這就使得網頁中正文部分更為突出明顯，便于被搜索引擎采集收錄。

第三，使用Bootstrap框架。Bootstrap是目前很受歡迎的前端框架，提供了優雅的HTML和CSS規范，簡潔靈活，使得 Web 開發更加快捷。

首先，網站要利于搜索引擎的排名優化。一個公司做個網站，都是希望把自己公司的網站盡可能的排在前面，這樣網站的流量才會大，所以這是一個優秀的前端開發工程師必須要考慮的問題。比如在做我們公司營銷官網的時候，前端開發工程師就會寫基于數據庫技術下的靜態頁面，這樣符合搜索引擎的規則，才能利于網站后期推廣，把網站排在前面。

然后，代碼簡潔、可讀性高。代碼簡潔，可讀性高，代碼各個板塊的結構要清楚，邏輯要清晰，對各個板塊要有備注。這樣不但制作的過程中會方便很多，而且還有利于后端人員的讀取，在以后的網站維護中也是極其重要的。

▲對代碼分模塊，使可讀性更高

最后，適當的動態效果，給用戶良好的視覺效果。比如之前澳洲的一個項目，就想要一個動態效果，用線條加載畫面，當客戶打開頁面的時候，是用線條把頁面加載出來的。這樣，能夠吸引用戶的眼球，給用戶帶來良好的視覺效果，從而讓客戶在頁面上停留更長的時間。

設計師一般要考慮如何能使頁面更美觀，更能吸引用戶眼球，而前端開發工程師則首先要考慮的是網站的打開速度，這樣設計師就容易與前端開發工程師有分歧，那么這就需要前端開發工程師與設計師及時溝通。

首先，分析好原型圖各個頁面的邏輯。當前端開發工程師收到設計師那邊的原型圖的話，第一步一般是先分析原型圖的邏輯，確定好各個頁面的邏輯，然后再扣各個頁面的細節，包括每一個小小的按鈕，每張圖片的像素大小，都需要先把這些準備工作做足了，后面才會減少失誤。

然后，在制作項目的過程中產生分歧時及時與設計師溝通。遇到最多的就是字體和頁面效果的問題。比如設計師那邊會設計出一個非常漂亮的中文字體，這樣就需要加載字體文件，中文字體有五萬多個，不像英文只有26個字母，字體文件就會很大，幾十兆甚至一百多兆，這樣加載頁面就會很慢，影響用戶體驗，所以就得跟設計師溝通，采取折中的方法，找到一個系統里自帶的又跟設計師設計的差不多的字體，這樣既保證了字體的美觀又提高了網站的打開速度。

本篇文章為原創內容，未經允許，謝絕轉載