rem原理是根據(jù)html的根字號來設(shè)置，rem是一個相對單位，就死相對這個根字號的，
不同的設(shè)備上動態(tài)的設(shè)置rem來適應(yīng)不同的設(shè)備
<meta name="viewport" content = "width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
這段代碼的意思是，讓viewport的寬度等于物理設(shè)備上的真實(shí)分辨率，不允許用戶縮放;
可布局寬度=物理像素/dpr/initial-scale
設(shè)計(jì)中用的公式：
var ratio = window.devicePixelRatio;
var meta = document.getElementById("viewport");
meta.setAttribute("content",`width=device-width,initial-scale=${1/ratio},user-scalable=no`);
document.documentElement.style.fontSize=document.documentElement.clientWidth/750 *100+‘px’；
動態(tài)的根字號大小=設(shè)備的物理寬度/設(shè)計(jì)稿寬度*100（方便計(jì)算）
什么是Viewport
手機(jī)瀏覽器是把頁面放在一個虛擬的“窗口”（viewport）中，通常這個虛擬的“窗口”（viewport）比屏幕寬，這樣就不用把每個網(wǎng)頁擠到很小的窗口中（這樣會破壞沒有針對手機(jī)瀏覽器優(yōu)化的網(wǎng)頁的布局），用戶可以通過平移和縮放來看網(wǎng)頁的不同部分。
width：控制 viewport 的大小，可以指定的一個值，如果 600，或者特殊的值，如 device-width 為設(shè)備的寬度（單位為縮放為 100% 時的 CSS 的像素）。
height：和 width 相對應(yīng)，指定高度。
initial-scale：初始縮放比例，也即是當(dāng)頁面第一次 load 的時候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動縮放。
dpi和屏幕尺寸（英寸）以及分辨率有關(guān)系，dpi是每英寸有多少個點(diǎn)么 401 = sqrt(1080 * 1080 + 1920 * 1920) / 5.5，在開發(fā)中你不用關(guān)心它?！畬懘a的時候只要關(guān)注dpr就可以了，網(wǎng)頁的視口的大小是設(shè)備分辨率/dpr ，比如iphone 6p是1080p的，但是dpr是2.46，所以實(shí)際頁面大小是440 * 780 這個分辨率對于蘋果設(shè)備開發(fā)絕對是一個災(zāi)難，因?yàn)榇蟛糠?080p的設(shè)備的dpr都是3
。
viewport的作用即無視設(shè)備的真實(shí)分辨率，直接通過dpi，在物理尺寸和瀏覽器之間重設(shè)分辨率，這個分辨率和設(shè)備的分辨率無關(guān)。比如，你拿個3.5寸-320 * 480的iphone3 gs、3.5寸-640 * 960的iphone4或者9.7寸-1024*768的ipad2，雖然設(shè)備的分辨率不同,物理尺寸也不同，但你可以通過設(shè)置viewport讓它們在瀏覽器里有相同的分辨率。比如說，你的網(wǎng)站是800px寬，你可以通過設(shè)置viewport的width=800，來讓你的網(wǎng)站在這三個不同的設(shè)備上都剛好滿屏顯示你的網(wǎng)站。
例如iphone6的dpr是2，就是代碼的1px實(shí)際上會占設(shè)備的2物理分辨率，所以chrome上iphone6顯示的事375，單實(shí)際是750，
1）如果不顯示地設(shè)置viewport，那么width的默認(rèn)為980。如果頁面的所有元素寬度都小于980，此時width為980，如果頁面最寬的位置超過980，那么width等于最大寬度?？傊J(rèn)能將整個頁面從左到右顯示出來。如果設(shè)置了viewport，比如，只單純地設(shè)置了user-scalable=no，例如，那么ios下width還是按980顯示（即默認(rèn)就會通過dpi縮放），但android和winphone下卻不會再縮放了，瀏覽器分辨率和真實(shí)設(shè)置分辨率一致。
2）對于ios設(shè)備，設(shè)置width可以生效，但對于android，設(shè)置width并不會生效。ios設(shè)備，縮放的比率即dpi是通過你設(shè)置的width和設(shè)置真實(shí)分辨率自動計(jì)算的，而android下你設(shè)置width無效，你能設(shè)置的是一個特殊的字段target-densitydpi，關(guān)于target-densitydpi可以參考一下這篇文章：http://hi.baidu.com/j_fo/blog/item/748361279ebccd18908f9d7d.html。也就是說，有三個變量：瀏覽器width、設(shè)備真實(shí)width、dpi。 我們簡單地用個公式來表達(dá)它們之間的關(guān)系吧（并非真實(shí)關(guān)系，簡單說明用） 設(shè)備真實(shí)width * dpi = 瀏覽器width，這里的三個變量，設(shè)備真實(shí)width是個我們不能操作的已知值，另外兩個變量我們可以設(shè)置一個來影響另一個，在ios中，我們能改的是瀏覽器width，dpi自動生成，而在android中，我們能改的是dpi，瀏覽器width自動生成。對于android，無論我們?nèi)绾卧O(shè)置width，也不會對瀏覽器width產(chǎn)生影響。
