關于一些基本概念如設備像素怀泊，css像素，參考
像素
上圖的pt和px互換才正確，reader @2x 指設備像素比
meta里面設置width=device-width看杭，這個device-width就是設備獨立像素忠藤。
在chrome里 看到的375*667是設備獨立像素
設計師給的是640px寬的設計稿是根據(jù)設備像素(device pixel,物理像素)為單位制作的設計稿；而前端工程師參照相關的設備像素比來進行換算楼雹，比如根據(jù)iPhone5出稿的設計稿的中有一個width:100px,height:200px的按鈕模孩，那么前端工程師在編碼web頁面時應該寫width:50px,height:100px。他們之間的換算比例是根據(jù)設備像素比來計算的贮缅。
當<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">榨咐，iphone5的css像素是320X568，當<meta name="viewport" content="width=device-width, initial-scale=0.5谴供， minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">块茁，css像素變成640X1136（如下圖），這是因為當scale=1,1個css像素對應2個物理像素憔鬼，而iphone5的物理像素是640X1136龟劲，當scale=0.5胃夏，1個css像素對應1個物理像素，css像素必須變成640X1136才能剛好完全對應所有物理像素昌跌，需要注意的是當scale=1,你用css寫div height:50px仰禀；在開發(fā)者工具inspect div，確實高50px蚕愤，變成scale=0.5答恶，在開發(fā)者工具看div的height還是50px
動態(tài)rem
rem這個單位代表根元素的 font-size 大小，例如 <html> 元素的font-size為16px萍诱，則1rem=16px
手機有很多不同分辨率悬嗓，如下圖，如果用響應式裕坊，要做3套css包竹，如果只想做1套css適應不同手機，方法是用百分比布局或整體縮放
百分比布局：
缺點是高度不能確定籍凝，不能實現(xiàn)例如寬高2:1周瞎，例如.child {height:20%} 是沒用的
整體縮放：
在解決這個問題上vw是最好的，因為vw和設備寬度有關饵蒂，1vw=視口寬度的 1/100声诸，但兼容性差
另外的方法就是動態(tài)rem，動態(tài)rem的簡單實現(xiàn)：https://jsbin.com/zoxizor/1/edit?html,css,output
- 在 SCSS 里使用 PX2REM ：
在 scss 文件里添加
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 640; // 640 是設計稿的寬度退盯，
.child{
width: px(320); //5rem
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size: 1.2em;
}
即可實現(xiàn) px 自動變 rem
移動端1px問題
以 dpr=2 為例：
你拿到一張標準的基于 iphone6 的設計稿(750px)
你看到它設計的一個 border寬度是 1px
那么border的其實是 border: 0.5px solid #000;
但問題是在iOS 7 和之前版本彼乌，OS X Mavericks 及以前版本，還有 Android 設備上瀏覽器可能不認識0.5px的邊框渊迁，將會把它解釋成0px慰照，沒有邊框。所以網(wǎng)上有很多其他的實現(xiàn)1px邊框的方法
而所謂的1px變粗請看 javascript - 1px邊框在移動端變粗問題產(chǎn)生的原理 琉朽， 移動端高清焚挠、多屏適配方案
設計稿上有1像素邊框，當你面對不同的屏幕時你希望它的行為是怎樣的漓骚？設計師希望在不同dpr的屏幕上這條線都是1物理像素蝌衔。
下面flexible.js的部分代碼可以實現(xiàn)，
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下蝌蹂，對于2和3的屏噩斟，用2倍的方案，其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他設備下孤个，仍舊使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
if (!metaEl) {
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
當直接寫<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">剃允，且dpr=2，border：1px，渲染出來是2px物理像素
當<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">斥废，此時頁面被縮小50%椒楣，border：1px渲染出來是1px物理像素
flexible.js
為了解決1px邊框問題，flexible.js根據(jù)dpr對頁面縮放
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下牡肉，對于2和3的屏捧灰，用2倍的方案，其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他設備下统锤，仍舊使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
if (!metaEl) {
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
}
導致字體font-size也要做相應調(diào)整:
.a{
font-size:12px;
}
[data-dpr="2"] .a{
font-size: 24px;
}
[data-dpr="3"] .a{
font-size: 36px;
}
設計師原本的要求是這樣的：任何手機屏幕上字體大小都要統(tǒng)一
dpr=2毛俏，根據(jù)源碼, scale=0.5，所以1個css像素對應1個物理像素饲窿，font-size=24px煌寇，對應24個物理像素，而dpr=1時font-size=12px逾雄，對應12個物理像素阀溶，根據(jù)下圖，dpr=1的普通屏的1個物理像素寬鸦泳，物理尺寸上等于dpr=2的retina屏的2個物理像素寬淌哟，所以任何手機屏幕上字體的物理尺寸大小一樣
- 其他
用chrome的開發(fā)者工具的手機模式查看頁面可發(fā)現(xiàn)，在手機屏幕單擊鼠標可以觸發(fā)oumousedown/oumousedown/oumousedown事件辽故，但移動鼠標不能觸發(fā)oumousemove，在移動端對應的事件是ontouchstart,ontouchmove,ontouchend
if(document.body.ontouchstart !== undefined){}
// 在pc上document.body.ontouchstart是undefined腐碱，表明不支持該事件誊垢，而在觸屏設備上是null，支持該事件
var x = event.touches[0].clientX //touch點的x坐標
// 因為手機支持多點觸控症见，所以關于touch的信息都放在一個數(shù)組里喂走，touches[0]表示一點觸控，tounch[1]表示另外一點觸控
而在pc上用 var x = event.clientX 獲取鼠標點擊的x坐標
手機上沒有hover事件谋作，resize事件
原生js沒有監(jiān)聽在手機上用手指滑動的事件芋肠，一種方法就是記錄第一次和第二次touch點的位置，如果第二次touch點在第一次touch點的左邊遵蚜，表明用戶向左滑
更多資料：
