## 番外篇 [了解真實的『REM』手機屏幕適配](https://mp.weixin.qq.com/s/JIRN56acxvJgmzk1Fjj6LA) [移動web開發適配秘籍Rem-慕課網](http://www.imooc.com/learn/942) **自適應，響應式，屏幕適配，這是三個獨立不同的概念。** * * * * * ### css像素與設備獨立像素 物理像素與設備像素的關系，幾個人或一個人可以搞定一條線，但一個人絕對搞不定多條線。多個物理像素可以配合出一個設備獨立像素，但一個物理像素不可能再分割而顯示出多個顏色。 設備獨立像素（密度無關像素） css像素，也是一種設備獨立像素，也稱為屏幕無關像素。 >[danger] 設備獨立像素的值就是設備獨立像素的數量，也就是當前屏幕上虛擬點的數量。我們對元素的控制都是通過控制這個虛擬的點來進行的，而不能直接控制器物理像素。 * * * * * ### 放大與縮小都是軟件實現的，原理是改變了元素的像素，或者虛擬像素。 屏幕的物理像素是固定的，畫面顯示的原理就是，虛擬像素映射到設備物理像素的效果。 只有屏幕足夠大，理論上就可以無限放大（幾個物理像素顯示一個像素），但是卻無法無限縮小（一個物理像素不可再分割），因為物理像素再小也會有極限。而我們縮小圖像的方式其實就是，減少圖像的像素，所以縮小的圖像會變得模糊就是這個原因。 * * * * * ### 適配：只兼容最小那還算適配嗎？只是保證最低限度能用而已。 以前我們沒有rem和媒體查詢時，做移動端頁面的適配就是先按照最小手機屏幕比如320px來做，只有在最小手機屏幕上顯示不擠了，那么大屏幕顯示也沒有問題，但是這樣的效果真的很差，當到大屏幕手機上看，元素就會特別小。對尺寸有嚴格要求的，這樣是無法還原設計稿真實尺寸的。 * * * * * ### 響應式樣式作用在哪些地方？ 響應式css一般是布局類的，比如元素位置，大小（寬高），形狀等，而其他樣式，比如顏色，邊框等通常不會有什么大的變化。 > 在響應式網頁中，PC樣式和媒體查詢樣式有交融的部分，通常只需要在媒體查詢中重寫元素布局類樣式，而元素其它樣式如，背景顏色、文字顏色等樣式則是重用的部分。重寫與重用，利用得好的話將一定情況下改善響應式網頁代碼冗余的情況。 * * * * * ### 必須要多端適配 頁面不可能在多端上都長一樣的，每個端屏幕不一樣，操作方式和習慣不一樣，所以多端必須有對應單獨優化的頁面展示，否則就不行。不要想偷懶。 * * * * * ### 媒體查詢規則還可以寫在標簽屬性上 媒體查詢規則還可以寫在link標簽的屬性上啊，這樣可以把自適應的css寫到單獨的文件中（有點類似.js文件中不需要`<script></script>`標簽），但是這樣能實現動態/懶加載文件嗎？NO，不會動態加載文件，還是和普通標簽一樣，一開始就直接加載文件了，不會只在滿足媒體查詢時才加載文件。 ``` <link id="mobile-style" media="only screen and (max-width: 767px)" type="text/css" rel="stylesheet" href="/skins/LessIsMore/bundle-LessIsMore-mobile.css?v=d9LctKHRIQp9rreugMcQ1-UJuq_j1fo0GZXTXj8Bqrk1"/> /* by: https://www.cnblogs.com/chenjfblog/p/8715580.html */ ``` * * * * * ### 設計稿切圖 [UI設計教程：APP切圖適配規范](https://www.365yg.com/a6337139493007556865#mid=5891797386) > 設計眼中的程序員，看她們切圖時是怎么想我們的。 > > 2倍圖應該是制作時就按照最大的尺寸制作，不然放大的二倍圖會模糊，不過縮小的倍圖不會失真嗎，這樣的話豈不是制作時就要制作多份，還是這個導出多倍圖并不是簡單的縮放處理，不會導致模糊和失真嗎。 * * * * * last update：2018-7-19 15:45:27