一、關於移動端相容性
目前針對跨終端的方案，主要分為兩大陣營：一套資源vs兩套資源。
第一種是通過響應式或頁面終端判斷去實現一套資源適配所有終端；
第二種是通過終端判斷分別調取兩套資源以適配所有終端。
這兩種思路我們並不能斬釘截鐵的說哪乙個更優選，正所謂」合適的才是最好的」。
思路一:通過響應式或頁面終端判斷去實現一套資源適配所有終端
優勢：只需維護一套資源，維護成本較低。
劣勢：需載入適配各個終端的各個資源，在不同終端通過響應式布局實現不同展現，部分互動效果需要在頁面中做終端判斷，代價較大，若資源為一套，部分在超高解析度裝置（例如iphone系列）下會失真，且在非wifi情況下即使加了延時載入也易出現載入慢的情況。
技術選型：jquery（或原生js等）+ 響應式 + 前端模組載入器（seajs或requirejs等）+ css預處理器（sass 或less等）。jquery較好的相容性配合響應式可相對代價較小地實現跨終端。前端模組載入器主要負責按需載入，以提高頁面載入速度，css預處理器 的變數、運算、巢狀等特性可大大提高手動計算響應式的效率，媽媽再也不用擔心我把比例算錯了。當然後兩者可參考需求及成本決定是否採用。
思路二:通過終端判斷分別調取兩套資源以適配所有終端
優勢：可根據不同端做個性設計及個性化資訊推送且可按需載入，如移動端可配合重力感應、不同手勢做各種炫酷拽效果，pc頁面可不受流量限制做適合pc端的效果。
劣勢：需維護兩套資源，維護成本增加。
技術選型：zepto（或xui等移動端輕量級框架）+ 響應式 + 前端模組載入器 + css預處理器 + 終端適配。zepto作為jquery的移動端版本，依然延續其自身優勢，大幅優化了移動端api且摒棄了相容」非現代瀏覽器」的冗餘**，成為移動端輕 便可用的js框架代表，對於習慣了jquery的同學來說簡直是不二之選！
終端適配目前一般通過ua判斷來實現。ua判斷可放在服務端也可放在頁面中，在**伺服器中做跳轉更快、更 準確且不走應用程式層，即使瀏覽器禁用了js依然可以跳轉到相應的位址，同時秉承著公共服務放在服務端這樣的雲端服務理念，我們選擇了通過**伺服器做終端適配。
user-agent嗅探，即web瀏覽器傳送乙個web頁面或資源請求時，會傳送乙個user-agent首部作為http請求的一部分，那麼我們就可以在伺服器端獲取想要的資訊，進而判斷並引導使用者到達相應的頁面位址。
二、pc上的**在移動端上怎麼辦？
如果把移動端的可視區域(320-768)的話，大部分**都會因為太窄而顯示錯亂；所以瀏覽器預設把viewport設定為乙個較寬的值 980px或1024px，至少保證pc**在移動端上可以顯示，只不過出現了橫向滾動條而已。
（一）幾個概念
1.css畫素
2.物理畫素
3.解析度
4.devicepixelratio
5.layout viewport
6.visual viewport
7.ideal viewport
（二）如何實現螢幕適配
需要用到
target-densitydpi = ui-width/device-width*window.devicepixelration*160
//ui-width: 布局寬度
//device-width:螢幕解析度寬度 iphone4為640
//target-densitydpi=device-dpi 標示使用裝置本身物理螢幕的畫素,不會發生預設縮放
//移動頁面設計 480*854的比例
//dpi = 480/screen.width*window.devicepixelratio*160;
//scalevalue = screen.width/480;
//控制適配 分為5種組合
/* width ＋ target-densitydpi(計算出來的) */
/* width */
/* width+target-densitydpi=device-dpi */
/* width+initial-scale */
/* targrt-densitydpi */
//通過順序設定5次來實現適配 直到
math.abs(window.innerwidth-480)<=10 表示viewport設定正確了。
js**控制
window.addeventlistener("orientationchange",function () );
//建議執行橫豎屏的事件都通過乙個偵聽完成，做乙個統一的管理；在螢幕橫豎屏切換完成之後再執行相應的事件
//定義橫屏顯示的樣式
@media screen and(orientation:landspace)
//定義豎屏顯示的樣式
@media screen and(orientation:portrait)
//某個尺寸的特殊樣式 豎屏時寬度為768px 符合一般ipad的條件
@media only screen and(orientation:portrait) and(device-width:768px)
pc端適配移動端
1.允許網頁寬度自動調整在網頁 的頭部，加入一行viewport元標籤所有主流瀏覽器都支援這個設定，包括ie9。對於那些老式瀏覽器 主要是ie6 7 8 需要使用css3 mediaqueries.js2.不使用絕對寬度由於網頁會根據螢幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬...
pc端rem適配 聊聊PC端頁面適配
目前pc並沒有像移動端那樣，可以用rem單位這種一站式解決方案，因為pc需要考慮低階瀏覽器，查詢和background size這些新屬性都不能用。設計稿 1920 1080 190 2.16 自己測1920 945 2.03 14寸普通筆記本 1366 768 190 2.36 參考 參考 登入考...
less rem移動端適配 PC
宣告 test width 300px 混合 box 混合 可以帶引數 巢狀 less 變數 適配主流裝置 adapterdevicelist 320px,360px,375px,384px,400px,414px,424px,480px,540px,640px,720px,750px 裝置的種類 ...