## 網站PC版和移動版的模板方案 ### 網頁實現PC端和移動端的兩種方案 #### 1：自適應 越開越多的網頁使用自適應技術開發，我們可以通過一套自適應網頁來適應PC端和移動端，但是要注意自適應技術的局限性，閱讀展示類網站可以做成自適應，但是功能性，交互性較強的頁面就不適合 了，比如商城，商品詳情頁，這樣的頁面用自適應來做，代碼量很臃腫。此時只能使用第二種方案。 * * * * * #### 2：PC和移動端分離開發 這種情況，里面又會涉及到多個問題了，不同設備訪問時，url會不會變化，要不要做跳轉。 應用是否分離，PC端和移動端應用分離開發，比如模塊分離開發也可以（tpshop就是分模塊，但是跳轉了）。 分離主要有兩種方式，模板分離，應用分離。 簡單的做法就是模板分離，同一套程序，只不過有兩套模板，根據客戶端類型，渲染不同的模板，這樣用戶看起來網址是一樣的，但是不同設備訪問時模板界面不一樣。V1就是那樣做的。 但這種有很明顯的缺點，有的PC端和移動端的同一個業務頁面功能性/頁面結構/展示內容也會有很大差別，直接套同一個應用（控制器），只是模板不同，這樣顯然是不可取的，很多時候移動端和PC端所需要的數據都不同，并且移動端更多的是接口開發，所以這種方式非常低效。 第二種就是應用（模塊）分離開發了，這種最靈活科學，PC端功能和移動端沒有重耦合。 再要思考的問題就是url了，要不要分url。 有的人覺得有必要分url，既然應用分開的，那就應該區分，這樣對用戶體驗好。并且可能會出現有的頁面PC端有，移動端沒有，不過一般用于分享傳播的頁面，PC端和移動端都是有的。 比如對于同一個頁面，移動端和PC端有如下的url： m.xxx.com/ac/12.html www.xxx.com/ac/12.html 當用戶設備訪問到不對應的url時，應該跳轉，那這個跳轉時客戶端的js跳轉還是服務端的重定向呢，服務端的重定向比較好，有時候兩套url的對應不像上面那樣規整，需要服務端自己轉換了。 也有人覺得為了提供統一一致的服務，移動端和pc端盡管展示不同的模板，但是url保持一致不需要有區別，GitHub就是這樣的。 > 如果不想跳轉url，不用響應式，用兩套模板，但不想共用控制器，那么可以請求一開始就用攔截器，檢測到是移動端訪問時，綁定模塊mobile，否則就是pc模塊，這樣就不用url跳轉來切換模塊了。 * * * * * ### 移動端wap全部用靜態模板 基于shopnc的好商城，移動端直接 http://v5.33hao.com/wap （index.html）都是靜態文件，連控制器都不需要，都不需要經過PHP處理，直接nginx就可以。功能都是調用接口，模板是前端根據數據自己渲染的（使用artTemplate模板引擎），和APP共用一套接口。簡直不要太方便。 >[danger] 這是前后端分離。但是分離后是否也存在一個問題，比如微信端授權登錄還是要調到動態文件上做授權操作的，還有微信支付等，需要嘗試一下，如果可以，那就可以完全做到前后端分離了，這樣前端直接使用前端自動化工具開發就好了，全部使用后臺接口。還有，傳統插件模塊開發可能對前后端分離不友好。 * * * * * ### 擴展 [嗶哩嗶哩（B站）的前端之路](https://m.toutiaocdn.com/group/6580148672208568846/?iid=33124962994&app=news_article_lite&timestamp=1532108136&wxshare_count=1&tt_from=weixin&utm_source=weixin&utm_medium=toutiao_android&utm_campaign=client_share) [php - 網站模板應該分為PC版和WAP版嗎？ - SegmentFault](https://segmentfault.com/q/1010000003026926) [php - 有PC版的網站如何做一套手機版的網站出來 - SegmentFault](https://segmentfault.com/q/1010000004043075) [互聯網分層架構，為啥要前后端分離？ - 架構師之路](http://mp.weixin.qq.com/s/Nhyo969WnEwyCWpr34ECcA) [分層架構，前后端分離有啥壞處？](http://mp.weixin.qq.com/s/ZKjKUkWkNqxiwNEjBDXtiQ) [服務端渲染 vs 客戶端渲染](http://mp.weixin.qq.com/s/I28GlXxzC1aT0LeXVfCThw) [一分鐘了解互聯網動靜分離架構](https://mp.weixin.qq.com/s/Kpsq8MH2TvXQEECyGrmj9A) [淺談響應式Web設計與實現思路 – 熊建剛的博客](http://blog.codingplayboy.com/2018/01/06/responsive-web-design/) [淺談響應式Web設計與實現思路](https://www.toutiao.com/a6508149161299280398/?tt_from=weixin&utm_campaign=client_share&timestamp=1515350460&app=news_article&utm_source=weixin&iid=22069500288&utm_medium=toutiao_android&wxshare_count=1) [利用Nuxt.js創建服務端渲染的Vue.js應用程序](https://mp.weixin.qq.com/s/HCOIjWDSjJIKPsjJO3LKmQ) [理解模板引擎](https://mp.weixin.qq.com/s/U0c79XHFYPeie0a7ucOPbQ) ~~~ 自適應vs響應式 自適應和響應式設計的不同主要概括如下： 自適應是多套用戶界面，而后者則只有一套用戶界面； 自適應需要服務端檢測請求設備分辨率相關信息，然后選擇對應版本返回； 自適應可以在不同版本使用不同適配方案，如在PC端使用百分比，在移動端使用rem等，而響應式則需要一個完美兼容的適配方案； ~~~ > 特別注意的是margin,padding屬性值為百分比時，是基于當前元素width值的。%單位也是一個縮放單位，所以也常用于樣式適配。 >[tip] 錯！！！只有padding才是基于當前元素的，margin和width一樣，都是基于父元素的。 >[danger] **自適應和響應式不是一個東西。** > 自適應、響應式、適配都是為了展示最好的前端效果，即在每一種設備上，都極力呈現出最好的效果。這個最好的效果，指的是，在各終端表現出最好的視覺效果，以及最合適、最方便的操作習慣。 **自適應，響應式，屏幕適配，這是三個獨立不同的概念。** 自適應是多端返回不同的頁面，需要多套程序或者多套模板。 響應式主要是利用css媒體查詢。 適配主要是應用于對完美還原設計稿尺寸有要求的頁面，主要是利用 flexible.js、rem、vm等技術。 * * * * * last update：2018-7-12 14:03:27