css即瀏覽器的渲染，而瀏覽器的渲染一定是基於畫素而言的。對於畫素，首先需要明確兩個概念，即物理畫素與邏輯畫素。
物理畫素就是反映顯示屏的硬體條件，反映的就是顯示屏內部led燈的數量，可以簡單理解，一組三色led代表乙個物理畫素，當然根據螢幕物理屬性以及處理led的方法不一樣。強調這是物理的，因為這是乙個純硬體指標。比如我把螢幕鋸了一半，物理畫素就只有一半。
邏輯畫素是為了調和距離不一樣導致的差異，將所有裝置根據距離，透視縮放到乙個相等水平的**距離之後得到的尺寸，是乙個抽象的概念，這個單位就是ios開發的px，安卓開發的dp。對於pc，包括win（8+）， linux，mac，由各自系統的或者對應軟體（比如webview內部）提供的影象介面處理引擎處理進行縮放。
在css中，我們通常選用px作為畫素單位。對於pc端而言，css的px與物理畫素一般可以等價來看，即預設情況下1920x1080解析度的螢幕下對應渲染css 1920x1080px。但是，css中的px只是乙個抽象的單位，在不同的裝置或不同的環境中，css中1px所代表的物理畫素數量是不同的。對於移動端而言，在早期的移動端裝置中（如iphone3），螢幕畫素密度較低（320x480），1px是可以與1個物理畫素劃等號的；但隨著技術水平的發展，螢幕解析度提公升了1倍，但螢幕尺寸卻不變，也就是說相同大小的螢幕上，物理畫素增加了1倍，這時css的1px就不等於1個物理畫素。還有乙個因素也會引起css中px的變化，那就是使用者縮放。例如，當使用者把頁面放大一倍，那麼css中1px所代表的物理畫素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的物理畫素也會減少一倍。
ppi（螢幕在每英吋上的物理畫素，移動端ppi一般以160為乙個檔次）的增加保證了螢幕渲染的高畫質晰度，但css的1px與物理畫素的關係卻發生了變化。試想，如果螢幕尺寸不變，物理畫素增加一倍，同時邏輯畫素與物理畫素比例關係不變，那麼實際渲染的大小將縮小一倍，這是無法容忍的。這裡引出乙個概念：dpr，
dpr （device point ratio / device pixel ratio）渲染畫素與邏輯畫素的比例。由於渲染畫素一般等於邏輯畫素，如果ppi是以160為基準的話，那麼 dpr = ppi / 160
多少倍屏或者多少x（三倍屏，3x，意思就是3dpr），一般來說就是說的是這個值，二倍屏三倍屏即1個css畫素等同於4個裝置畫素或者9個。
viewport畫素又是什麼，它本質是dip（device independent pixels），中文意思裝置無關畫素，是與上述所有畫素都無絕對邏輯關係的乙個單位。其實是瀏覽器內部對邏輯畫素進行再處理的結果，簡單來理解就是調整邏輯畫素的縮放來達到適應裝置的乙個中間層
對於pc，viewport是不生效的，所以在pc上，px其實就是邏輯畫素（chrome）。但是邏輯畫素是與軟體實現有關的，所以會出現一些問題。（比如在win上，對於部分國產馬甲瀏覽器，viewport內部沒有適配系統的縮放等級，導致渲染的內容過小）
ppk大神對於移動裝置上的viewport有著非常多的研究（第一篇，第二篇，第三篇）。ppk認為，移動裝置上有三個viewport。
也就是布局viewport，即預設的瀏覽器viewport 。可以通過 document.documentelement.clientwidth 來獲取寬度。
viewport來代表可視區域的大小，ppk把這個viewport叫做 visual viewport。ppk說visual viewport的寬度可以通過window.innerwidth來獲取， 然而我獲取的時候發現得到的值是網頁區域的值。
現在我們已經有兩個viewport了：layout viewport 和 visual viewport。但瀏覽器覺得還不夠，因為現在越來越多的**都會為移動裝置進行單獨的設計，所以必須還要有乙個能完美適配移動裝置的viewport。所謂的完美適配指的是，首先不需要使用者縮放和橫向滾動條就能正常的檢視**的所有內容；第二，顯示的文字的大小是合適，比如一段14px大小的文字，不會因為在乙個高密度畫素的螢幕裡顯示得太小而無法看清，理想的情況是這段14px的文字無論是在何種密度螢幕，何種解析度下，顯示出來的大小都是差不多的。當然，不只是文字，其他元素像什麼的也是這個道理。ppk把這個viewport叫做 ideal viewport，也就是第三個viewport——移動裝置的理想viewport。
ideal viewport 並沒有乙個固定的尺寸，不同的裝置擁有有不同的 ideal viewport。所有的 iphone 的 ideal viewport 寬度都是 320px，無論它的螢幕寬度是 320 還是 640，也就是說，在 iphone 中，css 中的 320px 就代表 iphone 螢幕的寬度。但是安卓裝置就比較複雜了，有320px的，有360px的，有384px的等等。
我們一般通過meta對viewport進行統一設定：
設定了ideal viewport。以下是它的6個屬性：
keyvalue
width
設定layout viewport 的寬度，為乙個正整數，或字串"width-device"
initial-scale
設定頁面的初始縮放值，為乙個數字，可以帶小數
minimum-scale
允許使用者的最小縮放值，為乙個數字，可以帶小數
maximum-scale
允許使用者的最大縮放值，為乙個數字，可以帶小數
height
設定layout viewport 的高度，這個屬性對我們並不重要，很少使用
user-scalable
是否允許使用者進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許
那麼如果我們想設定ideal viewport， 只需要把width設定成width-device或者把initial-scale設定成1.0就可以了。
前者比較容易理解， 後者設定成1就可以是為什麼？ 首先要理解設定成1.0就是意味著沒有縮放，而這樣卻可以達到ideal viewport的效果， 那麼很明顯，縮放是相對於 ideal viewport來進行縮放的，當對ideal viewport進行100%的縮放，也就是縮放值為1的時候，就得到了 ideal viewport。
從前文可以看出，css的px是一種邏輯畫素，它與移動端裝置的dpr與viewport的設定有關，因此，不同的移動端裝置css1px與物理畫素的關係也不相同。而這種不相同，是正常現象，因為我們使用更大的螢幕，不是想看更大的字，而是想看更多的內容，我們要做的，是將css在移動端裝置上顯示為適合螢幕渲染尺寸的視覺化效果。
移動端開發流程如下：
1. 在head 設定width=device-width的viewport
2. 在css中使用px
3. 在適當的場景使用flex布局，或者配合vw進行自適應
4. 在跨裝置型別的時候（pc 手機 平板）使用**查詢
5. 在跨裝置型別如果互動差異太大的情況，考慮分開專案開發
那麼viewport width=device-width是什麼意思，其實就是讓viewport的尺寸等於邏輯畫素的尺寸
CSS基礎之移動端適配問題
隨著網際網路行業的不斷發展，移動網際網路的比重越來越大，移動端開發適配問題是困擾大多數開發人員的難點，下面就簡單聊聊這個問題 記得那還是上古時代，在開發pc端網頁的時候，當瀏覽器檢視視窗隨意縮放的時候，我們要求所看到的頁面大小要隨視窗大小伸縮或者隱藏，當時，我們的解決方案就是通過 查詢的方法，獲取檢...
移動端適配問題
移動端web頁面，即常說的h5頁面 手機頁面 webview頁面等。適配問題產生的原因 手機裝置螢幕尺寸不一，做移動端的web頁面，需要考慮在安卓 ios的各種尺寸裝置上的相容，針對移動端裝置的頁面，設計與前端實現怎樣做能更好地適配不同螢幕寬度的移動裝置。適配的目標 在不同尺寸的手機裝置上，頁面相對...
移動端適配JS和CSS
移動端適配一般是兩種方式 一js方式 setrem window.addeventlistener orientationchange setrem window.addeventlistener resize setrem function setrem js方式書寫方便，而且適配所有的機型，但是...