一、認識物理畫素、裝置獨立畫素、裝置畫素比
在css中我們一般使用px做單位，需要注意的是，css樣式裡面的px和物理畫素並不是相等的。css中的畫素只是乙個抽象的單位，在不同裝置或不同環境中，css的1px所代表的物理畫素是不同的。在pc端，css的1px一般對應著電腦螢幕的1個物理畫素，但是在移動端，css的1px等於幾個物理畫素和螢幕畫素密度有關。
物理畫素(physical pixel)
物理畫素又被稱為設別畫素，裝置物理畫素，它是顯示器（電腦、手機）最小的顯示單位，每個物理畫素由顏色值和亮度組成。所謂的一倍屏、二倍屏（retina）、三倍屏，指的是裝置以多少物理畫素來顯示乙個css畫素，也就是說，多倍屏以更多更精細的物理畫素點來顯示乙個css畫素點，在普通螢幕下的1個css畫素對應乙個物理畫素，而在retina螢幕下，1css畫素對應的卻是4個物理畫素
裝置獨立畫素(device-independent pixel)
裝置獨立畫素又被稱為css畫素，是我們寫css時所用的畫素，他是乙個抽象單位，主要使用在瀏覽器上，用來精確度量web頁面上的內容。
裝置畫素比（device pixel ratio）
裝置畫素比簡稱dpr，定義了物理畫素和裝置獨立畫素的對應關係，：裝置畫素比=物理畫素、裝置獨立畫素。
css的1px等於幾個物理畫素，除了和螢幕畫素密度dpr有關，還和使用者縮放有關。例如當使用者把頁面放大一倍，那麼css的1px所代表的物理畫素也會增大一倍；反之把頁面縮小一倍，css的1px所代表的物理畫素也會減少一倍。關於這點，後面的1px細線問題還會講到。
二、viewport
viewport就是裝置上用來顯示頁面的那塊區域，但viewport又不侷限於瀏覽器可視區域的大小，他可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。在預設情況下，一般來講，移動裝置上的viewport都是要大於瀏覽器可視區的，這是因為考慮到移動裝置的解析度相對於桌面電腦來說都比較小，所以為了能再移動裝置上正常顯示那些傳統的為桌面瀏覽器設計的**，移動裝置上的瀏覽器會把自己預設的viewport設為980px或1024px，但帶來的後果就是瀏覽器會出現橫向滾動條，因為瀏覽器可視區域的寬度是比這個預設的viewport的寬度要小。
明確三種不同的viewport視口：
visual viewport 可見視口，指螢幕寬度
layout viewport 布局視口，指dom寬度
ideal viewport 理想視口，使布局視口就是可見視口即為理想視口
獲取螢幕寬度（viewport）的尺寸：
window.innerwidth/height
獲取dom寬度（layout viewport）的尺寸：
document.documentelement.clientwidth/height
設定理想視口ideal viewport：
該meta標籤的作用是讓layout viewport的寬度等於visual viewport的寬度，同時不允許使用者動手縮放，從而達到理想視口。
meta標籤裡面的引數含義：
width:設定layout viewport的寬度，為乙個正整數，或字串「width-device」;
initial-scale：設定頁面初始縮放值，為乙個數字，可以帶小數；
minimum-scal：允許使用者的最小縮放值，為乙個數字，可以帶小數；
maximum-scale：允許影虎的最大縮放值，為乙個數字，可以帶小數；
height設定layout viewport的高度，這個屬性對我們並不重要，很少使用的。
user-scalable：是否允許使用者進行縮放，值為no或yes
三、rem適配方案
適配是為了使頁面在不同手機裝置上，相對保持統一的效果。移動端自適應方案很多，有百分比布局，彈性盒模型布局等，但最好用的要數rem布局了。
rem是相對於根元素的字型大小的單位，我們可以根據裝置寬度動態設定根元素的font-size，使得以rem為單位的元素在不同終端上以相對一致的視覺效果呈現。下面介紹2種根據螢幕寬度設定rem基準值的方法。
用js設定rem基準值
/* 設計稿是750,採用1：100的比例,用1rem表示100px,font-size為100 * (clientwidth / 750) */
(function(doc, win) ;
if (!doc.addeventlistener) return;
win.addeventlistener(resizeevt, recalc, false);
doc.addeventlistener('domcontentloaded', recalc, false);
})(document, window);
用單位vm設定font-size
1vm等於螢幕可視區寬度的百分之一
html'
移動端判斷橫屏豎屏
可能我們在寫移動端專案的時候會有要求或者為了更好的體驗會做橫豎屏檢測，以達到更好的使用者體驗。判斷橫豎屏 var utils delay var detectres document.getelementbyid j detectres var detectdata document.getelem...
移動端觸屏事件
移動端瀏覽器相容性較好，我們不需要考慮以前 js 的相容性問題，可以放心的使用原生 js 書寫效果，但是移動端也有自己獨特的地方。比如觸屏事件 touch 也稱觸控事件 android和 ios 都有。touch 物件代表乙個觸控點。觸控點可能是一根手指，也可能是一根觸控筆。觸屏事件可響應使用者手指...
移動端滑屏demo
12 34 以上的demo放在具體專案中可能會遇到小問題，例如移動端滑動的還要實現點選到下乙個頁面，就會出現點選先滑動然後才會觸發click。在移動端，手指點選乙個元素，會經過 touchstart touchmove touchend click。手機瀏覽器上，兩次輕觸是放大操作，在第一次被輕觸後...