像素
我們看到上圖320x480叫分辨率，而這個所謂的分辨率就是說白了就橫向320個像素縱向480個像素組成
什么叫像素
像素（Pel，pixel;pictureelement），為組成一幅圖像的全部亮度和色度的最小圖像單元。電視的圖像是由按一定間隔排列的亮度不同的像點構(gòu)成的，形成像點的單位也就是像素，組成圖像的最小單位就是像素。從計算機(jī)技術(shù)的角度來解釋，像素是硬件和軟件所能控制的最小單位。它指顯示屏的畫面上表示出來的最小單位，不是圖畫上的最小單位。一幅圖像通常包含成千上萬個像素，每個像素都有自己的顏色信息，它們緊密地組合在一起。由于人眼的錯覺，這些組合在一起的像素被當(dāng)成一幅完整的圖像。當(dāng)修改圖像的某區(qū)域，實際上是在修改該區(qū)域內(nèi)的像素。對這些像素修改的好與壞將決定最終圖片的質(zhì)量。單位面積內(nèi)的像素越多，圖像的效果就越好。彩色電視圖像是由成千個像素點所組成的，而且每個像素都是由紅綠藍(lán)三種顏色并排組成的。(注意每個像素的大小是不固定的，他是根據(jù)設(shè)備的分辨率決定的)
什么是分辨率
屏幕分辨率是指縱橫向上的像素點數(shù)，單位是px。屏幕分辨率確定計算機(jī)屏幕上顯示多少信息的設(shè)置，以水平和垂直像素來衡量。就相同大小的屏幕而言，當(dāng)屏幕分辨率低時（例如 640 x 480），在屏幕上顯示的像素少，單個像素尺寸比較大。屏幕分辨率高時（例如 1600 x 1200），在屏幕上顯示的像素多，單個像素尺寸比較小。
需要區(qū)分的概念：
CSS像素和設(shè)備像素在有的時候是不一樣的
設(shè)備（物理）像素 ：
設(shè)備像素又稱為物理像素, 是"物理屏幕"上真實存在的發(fā)光點，只有屏幕一經(jīng)出廠就固定不會改變。
CSS（邏輯）像素：
CSS像素又稱為邏輯像素，是編程世界中虛擬的東西, 我們通過代碼設(shè)置的像素都是邏輯像素。
歷史原因
在PC端，1個CSS像素往往都是對應(yīng)著電腦屏幕的1個物理像素,所以我們無需關(guān)心PC端的CSS像素和設(shè)備像素。
在手機(jī)端，最開始其實1個CSS個像素也是對應(yīng)著手機(jī)屏幕的1個物理像素，但是后來一個改變世界的男人(喬布斯)改變了這一切。從iPhone4開始，蘋果公司推出了所謂的retina視網(wǎng)膜屏幕。iPhone4的屏幕尺寸卻沒有變化，但是像素點卻多了一倍，這就導(dǎo)致了在1個CSS個像素等于1個物理像素的手機(jī)上, 我們設(shè)置1個CSS像素只會占用1個物理像素，而在1個CSS個像素不等于1個物理像素的手機(jī)上, 我們設(shè)置1個CSS像素就會占用2個物理像素，所以仔細(xì)觀察你會發(fā)現(xiàn)同樣是1像素但是在retina視網(wǎng)膜屏幕的手機(jī)上會粗一些。
設(shè)備像素比
設(shè)備像素比device pixel ratio簡稱dpr，即物理像素和設(shè)備獨立像素的比值。為什么要知道設(shè)備像素比呢？因為這個像素比會產(chǎn)生一個非常經(jīng)典的問題，1像素邊框的問題。
1px邊框問題
當(dāng)我們css里寫的1px的時候，由于它是邏輯像素，導(dǎo)致我們的邏輯像素根據(jù)這個設(shè)備像素比（dpr）去映射到設(shè)備上就為2px，或者3px，由于每個設(shè)備的屏幕尺寸不一樣，就導(dǎo)致每個物理像素渲染出來的大小也不同（記得上面的知識點嗎，設(shè)備的像素大小是不固定的），這樣如果在尺寸比較大的設(shè)備上，1px渲染出來的樣子相當(dāng)?shù)拇值V，這就是經(jīng)典的一像素邊框問題。
解決方案
transform: scale(0.5) 方案
div { height:1px; background:#000;-webkit-transform: scaleY(0.5); -webkit-transform-origin:0 0; overflow: hidden;}
css根據(jù)設(shè)備像素比媒體查詢后的解決方案
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
? ? .border-bottom::after {
? ? ? ? -webkit-transform: scaleY(0.5);
? ? ? ? transform: scaleY(0.5);
? ? }
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
? ? .border-bottom::after {
? ? ? ? -webkit-transform: scaleY(0.33);
? ? ? ? transform: scaleY(0.33);
? ? }
}
適配方案
viewport：
標(biāo)準(zhǔn)適配方案：
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
viewport的功能：
1. width 可以設(shè)置寬度 (device-width 當(dāng)前設(shè)備的寬度)
2. height 可以設(shè)置高度
3. initial-scale 可以設(shè)置默認(rèn)的縮放比例
4. user-scalable 可以設(shè)置是否允許用戶自行縮放
5. maximum-scale 可以設(shè)置最大縮放比例
6. minimum-scale 可以設(shè)置最小縮放比例
在<meta name="viewport" content="" > content="" 使用以上參數(shù)
1. width=device-width 寬度一致比例是1.0
2. initial-scale=1.0 寬度一致比例是1.0
3. user-scalable=no 不允許用戶自行縮放 （yes，no 1,0）
rem：
使用rem為元素設(shè)定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優(yōu)點于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對于不支持它的瀏覽器，應(yīng)對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設(shè)定的字體大小。
rem 是相對于html節(jié)點的font-size來做計算的。所以在頁面初始話的時候給根元素設(shè)置一個font-size，接下來的元素就根據(jù)rem來布局，這樣就可以保證在頁面大小變化時，布局可以自適應(yīng)，如此我們只需要給設(shè)計稿的px轉(zhuǎn)換成對應(yīng)的rem單位即可。
//set1rem = viewWidth / 10
functionsetRemUnit() {?
?var rem = docEl.clientWidth / 10;
?docEl.style.fontSize = rem +'px'
}
setRemUnit();
vw,vh:
vh、vw方案即將視覺視口寬度 window.innerWidth和視覺視口高度 window.innerHeight 等分為 100 份。
vh和vw方案和rem類似也是相當(dāng)麻煩需要做單位轉(zhuǎn)化，而且px轉(zhuǎn)換成vw不一定能完全整除，因此有一定的像素差。
媒體查詢：
所有設(shè)備都使用同一種布局相對顯得呆板，建議還是不同屏幕情況下做媒體查詢適配不同方案吧。
