## 深入理解px 保持統一效果的等比縮放。 圖片特殊的特性 * * * * * 寬度好說，用百分比很容易適配，是和屏幕保持等比縮放的，但是高度用百分比就不行了，所以一般高度給個固定值，但這樣就會感覺怪怪的，讓元素看起來（短短）窄窄的或（矮矮）扁扁的（比如按鈕，一般寬度用百分比，是可以隨著屏幕寬度變化自動進行等比縮放的，而高度是固定不變的，這樣在屏幕很寬時會感到強烈的拉伸效果，在屏幕變窄時又感覺擠在一起），在要求不高時可以這么做，但這樣顯然沒達到我們高標準的適配要求（真實還原設計稿）。 * * * * * 設備都有一個默認初始的設備獨立像素，和一個dpr，但是設備獨立像素可以被修改的（通過 viewp縮放改），設備分辨率即物理像素是不能被改變的。設備獨立像素，是虛擬的像素，即屏幕的一個點，這個點是程序虛擬的，css像素是一種設備獨立像素。 * * * * * 百分比適配，rem適配，viewpro適配 ，比例縮放適配(通過縮放，修改設備獨立像素，而不直接設置設備寬度)，缺點所有設備都是一樣的，相同的獨立像素，這樣大屏就發揮不了作用，不能顯示更多的內容，rem雖然也有這個問題，但是rem還可以使用px，更加靈活，大屏可以等比縮放適配效果圖，也可以使用px顯示更多的內容，而比例縮放適配就悲劇了。每一種技術方案都有好有壞，沒有絕對的，只有在合適的使用場景下，才能突顯方案的好壞，有些時候要多種方案聯合使用，通力協作，取長補短，一起來實現最好的效果。 * * * * * 每個設備都有默認的設備獨立像素，和dpr，但設備獨立像素是可以被改變的(dpr不能被修改)，調整默認viewpo sva縮放（默認為1），當大于1為放大頁面，當小于1為縮小頁面。放大頁面時縮小了默認設備獨立像素，縮小倍數為aca值，縮小頁面時，放大了默認的設備獨立像素，放大倍數為ac。 * * * * * Y=P/Z，Z為一個常量。除以多少相當于是把屏幕分為多少份，這是一個定值，設為多少都可以，并不影響實際的適配，是根據設計稿寬度來決定的，選一個好算的默認基準值就可以。750的設計稿，分為7.5份，基準值為100就比較好算了。640那就分為6.4份，保持基準值100。所以嚴格按照設計稿來確定，只有以設計稿為標準適配，那么其它屏幕也就能同等適配了。 設計稿就是標準，記住這句話，我們只管以設計稿為標準時的常量和基準值，單位換算就是以這個標準基準值換算的。 適配時必須始終以設計稿為標準適配，不能變，因為代碼是寫死了的，換算時是以設計稿為標準的。 ---- 用縮放解決高清屏下1px邊框問題，難道這樣不會把元素都縮小了嗎？ 修改sc縮放頁面了，元素大小不會縮小是因為大小是用rem單位的，而縮放頁面其實是放大了設備獨立像素而已。 還記得嗎，之前我們證明過，只要在標準設計稿中適配好了，其它所有大小屏幕下也就同等的適配了。要仔細體會這句話的意義。屏幕大小的變化不就是設備獨立像素的變化嗎，而今設備獨立像素的縮放也是如此。 放大的頁面，那么按道理說1px會縮小，而rem布局的元素會放大，那這樣的話淘寶的方案就不行了啊，但其實淘寶那個一直設置了設備獨立像素等于設備寬度啊，也就是沒變啊。 待做實驗，縮放，如果固定設備獨立像素為設備寬度會怎樣，對rem和px又會有什么樣的影響，以及為什么。 rem是比例，而縮放設備屏幕大小并沒有改變。 又縮放了，又設置設備獨立像素為設備寬度，那么到底什么情況啊，縮放時設備獨立像素到底變化沒有？這種情況是怎么處理的，需要搞懂細節。 難道設置了設備獨立像素為設備寬度的情況，縮放并不會改變設備獨立像素，也就不會影響rem，這是一種特殊的情況，只會縮小px，px減半？ 所以用rem單位的就不會受縮小頁面影響，而邊框使用的是px為單位，所以才會受縮放影響。 ---- 只要方便好用就可以，淘寶那樣不好，分成100份還說是為了以后向后兼容vm，這叫什么向后兼容啊，以后用vm時自然有方案，何必現在這樣，沒有任何意義，強行這樣導致不好算，又搞個工具來計算，這真是故意引入新工具，增加復雜性和不確定性。而網易小米的就很簡單，直觀，不在乎非要分100份，只要好算了就行了，這樣無需引入其它工具，方便簡單。 * * * * * 媒體查詢斷點肯定不是隨便設置的，也沒有所謂的什么的遞增規律，不要忘記適配、響應式的初衷是為了要滿足不同設備，如果隨便來，要是把多個階段的屏幕大小當成一個斷點里面了，那就沒有意義了。所以斷點也是根據設備屏幕大小來的，蘋果比較標準好說，但是安卓就麻煩了，所以適配盡量包容蘋果和安卓各個階段的屏幕，當然根據高清屏可以針對性的做些設媒體查詢設計。 * * * * * 蘋果的屏幕真比安卓清晰嗎，網上都是關于蘋果視網膜屏幕比安卓清晰的文章，其實就是說像素密度ppi比較高，但那都是以前了，基本都是16年以前文章，現在不一樣了，安卓屏幕基本都1080了，蘋果8p還是750，已經沒有可比性了，安卓的dpr都是3了基本，現在在說蘋果比安卓屏幕清楚就站不住腳了。 * * * * * px是固定單位，1px所顯示的尺寸大小是固定，不會隨屏幕大小而發生變化（1px為一個點，它所包含的物理像素數量是固定的，與屏幕尺寸大小無關，但是視口縮放可以改變點所包含的物理像素數量，下面會說到），所以不滿足適配要求。而rem以跟元素為基準，相當于把屏幕分為多少份了，1rem相當于1份，1份代表的點數量為基準值，只要根元素基準值變化了，rem所表示的px也會變化，所以只要屏幕大小變化時，控制基準值變化，就能實現與屏幕等比縮放的適配效果。css像素是虛擬像素，也就是設備獨立像素，1px代表一個虛擬像素，即一個點，元素就是由這些點組成的，我們只能控制虛擬像素。 虛擬像素可以想象成是鋪在屏幕上的一張網，面積始終和屏幕面積相同，屏幕上是一個個格子，也就是物理像素，是固定的，這張網也是一個個格子，這個格子大些，一個網格子可以包含幾個屏幕上的格子，網格子可以無限大，包含更多的屏幕格子，也可以變小，包含少量的屏幕格子，但最小不能小于屏幕格子，屏幕格子不能分割，也就是最小時剛好和屏幕一一對應。 視口縮小時，設備獨立像素，也就是屏幕上的點，數量增多，也就是網格子數量增多，屏幕面積是不變的，隨著格子數量增多，那么每個格子大小就會變小，即一個格子所包含的屏幕格子數量減少，即一個設備獨立像素所包含的物理像素數量減少，而px元素的點數量，px值是寫好不變的，所以當視口縮小后，導致一個點所包含的物理像素數量減少了，那么px元素的物理尺寸自然縮小了，這就是視口縮放的原理。（至于設備獨立像素的變化規則，為什么會這樣，這不是我們所控制的，這種變化規則是我們通過獲取到的值觀察到的） 視口放大同理推導。 ---- 響應式是讓元素（同一html）在不同設備的屏幕上（屏幕大小，像素密度不同）有不同的展示效果，主要是布局樣式的不同，以達到在不同設備上有著不同的視覺效果，和滿足在不同設備中瀏覽、和操作習慣上的差異。 屏幕適配主要是以還原設計稿為目標，實現頁面與屏幕尺寸的等比縮放，使得頁面在不同屏幕下達到一致的體驗，以及解決高清屏1px邊框問題。 兩者都涉及到元素的布局，但是它們各自的目標和關注點是不同的。 下面我們就來看如何結合兩者的開發過程，一起融入項目中。 從代碼差異的角度來看，響應式需要寫很多的媒體查詢代碼（如果是pc頁面要做成響應式兼容移動端，也需要非常多的響應式樣式代碼），而屏幕適配則主要集中精力在將設計稿尺寸按照規則還原成rem代碼上，適配的規則是一段很小的js代碼。 一般pc頁面是不需要屏幕適配的，直接使用固定像素就可以了。我們思考一下，最難得一個題，如何將pc頁面做成響應式的，并且還要屏幕適配呢。 首先屏幕適配需要使用rem單位，那么pc頁面一開始也要使用rem單位，但是pc頁面無需適配，也就是無需運行適配規則代碼動態改變根元素的字體大小，那么我們就只讓適配規則代碼在移動端才執行，只要pc端，一開始默認根元素字體大小為100px，移動端設計稿適配標準基準值也是100px。這樣我們就實現了pc端，響應式，屏幕適配，三者的融合了。 ---- 物理尺寸 = 單個像素的物理尺寸 * 物理像素個數 單個像素的物理尺寸與 像素密度PPI有關，物理像素個數與 設備獨立像素數值 和倍數有關 物理像素個數 = 設備獨立像素數值 * 倍數 倍數不可能小于1，因為無論怎么縮小，一個物理像素都不可能拆分而表示兩個設備獨立像素。 上面的關于單個像素的物理尺寸與像素密度有關的說法不嚴謹，應該是屏幕尺寸固定的情況下，像素密度越高，單個像素的物理尺寸的越小，反之像素密度越低，單個像素的物理尺寸越大。 如果有兩塊屏幕，它們單個像素的物理尺寸相同，那么可以認為這兩塊屏幕是相同的。此時如果它們屏幕大小是相同的，那么屏幕密度也是相同的。如果像素間是沒有空隙的，那么單個像素的物理尺寸大小就決定密度，只要單個像素的物理尺寸是相同的，那么它們的像素密度也都是相同的，而不論它們的屏幕大小是否一致。 所以屏幕尺子在不校準的情況下是無法使用的，我們知道屏幕的像素數量，但卻不知道單個像素的物理尺寸，所以我們需要校準，方式是讓你拿起你的銀行卡在屏幕上校準大小（我們都知道銀行卡的寬度是比較標準的一個寬度），選好后就能得到單個像素的物理尺寸是多少了。 [UC頭條：蘋果iPhone 8屏幕及其分辨率大小亮眼分析]([http://s4.uczzd.cn/webapp/webview/article/news.html?app=smds-iflow&aid=7683138143860936654&cid=0&zzd\_from=smds-iflow&uc\_param\_str=dndseiwifrvesvntgipf&rd\_type=share&pagetype=share&btifl=100&sdkdeep=2&sdksid=b89efb22-20e7-3ef9-2052-ccfac138f4af&sdkoriginal=b89efb22-20e7-3ef9-2052-ccfac138f4af](http://s4.uczzd.cn/webapp/webview/article/news.html?app=smds-iflow&aid=7683138143860936654&cid=0&zzd_from=smds-iflow&uc_param_str=dndseiwifrvesvntgipf&rd_type=share&pagetype=share&btifl=100&sdkdeep=2&sdksid=b89efb22-20e7-3ef9-2052-ccfac138f4af&sdkoriginal=b89efb22-20e7-3ef9-2052-ccfac138f4af)) [詳解LayaAir引擎游戲屏幕適配，及有效抗鋸齒](https://cloud.tencent.com/developer/article/1595389) > 我們屏幕的像素點，是由行與列的矩陣序列組成。也就是說屏幕中是不存在斜線的。基于像素繪圖的畫布，要是畫橫豎的直線，那絕對是相當的平滑。可是畫曲線和斜線怎么辦。只能是由兩個相鄰的像素點不斷重復延申組成，如果這句話不好理解，我們想象一下樓梯，從側面去看，大概就是這個樣子。 * * * * * last update：2018-7-31 00:49:30