初級(jí)前端的我，面對(duì)很多問(wèn)題，都不知道怎么解決，百度，問(wèn)別人，然后自己去理解。
發(fā)現(xiàn)，太多的事情無(wú)法想象，無(wú)法預(yù)料，現(xiàn)在，還可以好好的活著就該感恩的活著！
我的大學(xué)同學(xué)，我的主內(nèi)家人，竟那么突然離開(kāi)了，沒(méi)有留下一絲的只言片語(yǔ)，能怎么辦呢？只能感恩的活著，活出感恩的生活，寫(xiě)這個(gè)文章，想好好的提醒自己，今天，此時(shí)此刻，還能坐著敲代碼是種幸福，因?yàn)槲抑牢也皇亲约夯钪?，我是為榮耀上帝而活，有目標(biāo)有使命，希望，我身邊的人可以因?yàn)槲叶靡嫣帲?/p>
感慨下人生，立足現(xiàn)在，好好生活。珍惜眼前的一切，因?yàn)椴恢烂魈旌鸵馔饽膫€(gè)會(huì)先來(lái)。。。
進(jìn)入正題，之前不太會(huì)寫(xiě)移動(dòng)端，就會(huì)用框架，然而框架還用的不太熟，所以，一頓百度，記錄下。
首先要清楚一些概念：
物理像素(physical pixel)
一個(gè)物理像素是顯示器(手機(jī)屏幕)上最小的物理顯示單元，在操作系統(tǒng)的調(diào)度下，每一個(gè)設(shè)備像素都有自己的顏色值和亮度值。
設(shè)備獨(dú)立像素(density-independent pixel)
設(shè)備獨(dú)立像素(也叫密度無(wú)關(guān)像素)，可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系統(tǒng)中得一個(gè)點(diǎn)，這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素(比如: css像素)，然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。
所以說(shuō)，物理像素和設(shè)備獨(dú)立像素之間存在著一定的對(duì)應(yīng)關(guān)系，這就是接下來(lái)要說(shuō)的設(shè)備像素比。
設(shè)備像素比(device pixel ratio)
設(shè)備像素比(簡(jiǎn)稱(chēng)dpr)定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系，它的值可以按如下的公式的得到：
設(shè)備像素比 = 物理像素 / 設(shè)備獨(dú)立像素 // 在某一方向上，x方向或者y方向
在javascript中，可以通過(guò)window.devicePixelRatio獲取到當(dāng)前設(shè)備的dpr。
在css中，可以通過(guò)-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進(jìn)行媒體查詢(xún)，對(duì)不同dpr的設(shè)備，做一些樣式適配。
移動(dòng)端頁(yè)面的head里要寫(xiě)上
<meta name="viewport" content="width=device-width,inital-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
解析：
width=device-width：讓寬度=設(shè)備縮放之后的寬度，比如320、360、375、414這些屏幕。
initial-scale=1：初始化的縮放比例1，這個(gè)屬性和css中transform: scale(1);有異曲同工之妙。
minimum-scale=1：最小縮放比例，相當(dāng)于你給div設(shè)置mix-height一樣，有限制。maximum-scale=1：最大縮放比例。
user-scalable=no：是否允許用戶(hù)使用雙指進(jìn)行縮放，默認(rèn)不允許。
我們需要寫(xiě)border:1px的時(shí)候，實(shí)際上是物理相似2px，這種情況平時(shí)做直線(xiàn)的時(shí)候勉強(qiáng)可以應(yīng)付，transform: scaleY(0.5);這樣看起來(lái)就洗了很多，但是做圓角的按鈕的時(shí)候就力不從心了，而且大量使用transform 的代碼也不是很優(yōu)雅，這個(gè)時(shí)候我們可以在頭部引入這么一行代碼：
<meta name="viewport" content="width=640,user-scalable=no">
就是640，和設(shè)計(jì)圖的尺寸一模一樣。還是灰常管用的，可以用下
然后，你需要引入js，之前我寫(xiě)的媒體查詢(xún)，但是效果不是特別好，很多屏幕還有距離什么的與設(shè)計(jì)出入太大，所以還是動(dòng)態(tài)獲取當(dāng)前屏幕大小，然后讓電腦自己生成相應(yīng)的樣式渲染還是很棒噠！來(lái)段js代碼
(function () {
var supportOrientation = (typeof window.orientation === 'number' && typeof window.onorientationchange === 'object')
var init = function () {
var htmlNode = document.body.parentNode, orientation
var updateOrientation = function () {
if (supportOrientation) {
orientation = window.orientation
switch (orientation) {
case 90:
case -90:
orientation = 'landscape'
break;
default:
orientation = 'portrait'
break;
}
} else {
orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait'
}
htmlNode.setAttribute('class', orientation)
}
var recalc = function () {
var docEl = document.documentElement
var clientWidth = docEl.clientWidth
docEl.style.fontSize = 50 * (clientWidth / 375) + 'px'
}
var x=function(){
recalc()
updateOrientation()
}
if (supportOrientation) {
window.addEventListener('orientationchange', x, false)
} else {
//監(jiān)聽(tīng)resize事件
window.addEventListener('resize', x, false)
}
x()
}
window.addEventListener('DOMContentLoaded', init, false)
})()
docEl.style.fontSize = 50 * (clientWidth / 375) + 'px'.這個(gè)50是根font-size的大小，可以自己改動(dòng),我的設(shè)計(jì)稿是蘋(píng)果6的375*667,所以我用的50，這個(gè)根據(jù)實(shí)際情況和個(gè)人偏好而定，怎么好算怎么來(lái)。
然后就可以進(jìn)行你的布局和渲染了。。。。里面用到的屬性，不管是height,width,margin,padding,都統(tǒng)一用的rem，相對(duì)的單位，字體的話(huà)就是設(shè)計(jì)給的大小，用px和rem進(jìn)行換算，話(huà)說(shuō)有點(diǎn)費(fèi)腦筋，所以如果可以，可以選擇用Sass語(yǔ)言，便利開(kāi)發(fā)，這也是我要學(xué)習(xí)的。
慢慢學(xué)習(xí)，每天進(jìn)步一點(diǎn)點(diǎn)，希望可以幫到你！
每天都是新的，每天都是與眾不同的，世界有你會(huì)更美好！加油?。?！
