不做處理的情況下，乙個375px寬 667px高的矩形(iphone5大小)在不同裝置的顯示。
1、pc端，很大，就像乙個真正的iphone5
這時候css中的px，還挺正常的嘛
2、在iphone5中顯示
小了很多很多，明明都是320x568啊？
iphone5的320x568是它自己的視口大小，和解析度，螢幕尺寸，對應的css的px一點數值上的關係都沒有！
1136x640px 這是手機的物理畫素，就是手機上有多少個畫素點
4英吋 手機螢幕大小
326ppi 畫素密度，就是每英吋有多少畫素點
怎麼也弄不出乙個320x568出來吧
所以說手機的物理畫素是640x1136，而邏輯畫素是320x568
裝置畫素比 dpr 就是 物理/邏輯 = 2
可以看到，的確是2
但是這個2有啥用麼？沒有。
是不是把當前元素寬高x2，就是640x1136了，就是手機大小了？
還不是啊
那這個dpr有啥用啊，也沒什麼卵用
那要和手機一樣大，要怎麼辦？
這就有了視口這個概念
layout-viewport
裝置瀏覽器預設的乙個視口，其實直接看滿螢幕情況下html的寬高即可
或者用
document.documentelement.clientwidth獲取
可以看到，整個手機滿螢幕是980px x 1739.2px啊。
那些個320px，640px，有啥用啊？
根本沒有用，把元素的寬設為980px就佔滿了
在正常頁面下，這有多大呢？
這也就是為什麼，裝置上截圖，在電腦上顯示很大的原因。
這個layout-viewport，是手機瀏覽器頁面的大小。
頁面先按980px x 1739px來渲染，然後再等比縮放到裝置的320px x 538px。不會出現滑動條
所以元素就會顯得很小很小了。
這個320px x 538px 就是裝置的visual-viewport
這個頁面還沒有縮放，顯示了真實大小，容易理解。
將頁面viewport設定為visual viewport，就是了
這樣，我們就可以根據裝置的邏輯畫素 320px x 568px 來寫了這樣，pc頁面和iphone5就能很好的適配了。
但是還有乙個問題呢，不同裝置的viewport是不同的，不同裝置之間怎麼適配啊？
所以這些情況，就不要寫px這種單位了。
可以選擇100%和rem這些單位，這樣元素可以適配得比較好。
但是文字呢？
現在一般手機，ideal viewpot差別只有10-20px，文字區別不大
ipad pro這種超高解析度的，設定了viewport之後，乙個css畫素也幾乎可以像pc上面1：1顯示了，所以字也不會小
當然，實際的效果是，多個物理畫素去顯示乙個css畫素
結論
一、設定了
<之後，1乙個css中的px才是裝置螢幕上的1px(320x568)meta
name
="viewport"
content
="width=device-width"
>
其實這倆都是邏輯畫素而已。
真正的情況還是用多個物理畫素去表示乙個css畫素了
二、dpr是物理畫素和邏輯畫素(visual視口大小)的比值而已。與元素大小無關
元素顯示得小時因為先按照layout-viewport顯示，再等比縮放到visual-viewport。
只有設定了
<之後，css畫素和邏輯畫素比例相等了。meta
name
="viewport"
content
="width=device-width"
>
dpr才表示正確。
當dpr為2時
css中乙個10x10的元素，其實是通過20x20的物理畫素表示的。因為是面積比，所以就是1：4了。所以說dpr越高，越清晰。
三、解析度，就是物理畫素，就是螢幕有多少個畫素點，就是1080x1920這些東西
ppi。就是每英吋有多少畫素點。計算公式是
dpr是怎麼計算的呢？ 解析度/邏輯畫素 就是了
比如640/320
四、這些東西，分開理解，不要強加關聯。
關於移動段裝置物理畫素和css畫素的一點研究
拿ip6為例 375 667指的到底是什麼？答案 css邏輯解析度 研究過程，我們把ip6的物理水平尺寸 也就是螢幕寬度 算出來 大概是5.9cm 尺子量的，不會特別精確 換算成in的話2.3228，先驗證ppi 官方給出的ppi是326，用1334 2.3228大致就是322，驗證成立。接下來需要...
移動端設定border的1px畫素解決方案
可能有人會問，設定邊框1px問題，直接 border 1px soild ccc 不就完事了，為什麼需要這麼麻煩？因為移動端的dpr裝置畫素比不同，直接設定會出現邊框加粗問題，親們可以自行測試，這裡不做過多闡述。下面直接上解決方案。1.為了方便通用，在base.scss檔案中 使用 mixin 定義...
移動端px和rem的換算
看根元素html裡面設定的font size是多少 50 px，即認為1rem為多少 50 畫素 rem的優點是所有的元素大小都是乙個倍數，相對於根元素的倍數，所以只需要修改根元素，所有的元素都可以變化。可以適應不同的裝置解析度。缺點是ie6 ie7 ie8不支援這個標籤。指定了 1rem為50px...