1. css畫素、裝置畫素、邏輯畫素、裝置畫素比
大家可以先看這篇文章了解一下基本概念。
邏輯畫素：其它就是css畫素，他們其實是同一回事。
裝置畫素比：css畫素與物理畫素的乙個比值。
裝置畫素：手機上畫素的點，通常乙個畫素點就是一點，但從蘋果出了retina屏 幕後，如果畫素比為2,代表乙個邏輯畫素表示2個物理畫素，如上圖，就是說一般我們寫高等於2px，寬等於2px，正常對應就是正面的面積為4的4個畫素，這是大家所能正常理解的，但是在retina屏的時候，如果畫素為2，它是1比2，就是說css 1px等於 retina 2px ,所以原來用2 x 2表示4個px,現在在retina需要16個畫素來表示。
如上圖,viewport相信大家都 會，但對於width=device-width,為什麼 要這樣設定以及設定的原理，我想大家可能不太明白。
1）viewport主要分為三類 visual viewport，layout viewport, ideal viewport
layout viewport:如上圖藍色的頁面，你可以認為你寫的頁面,它就是乙個layout viewport。
visual viewport:如上圖手機裡， 如里說沒有width=device-width的話，你這個很龐大的頁面，在手機 有限的視窗範圍內，是不是放不下。如果說手機是透明的話，你怎麼拖後面的大圖，在手機上只能看到乙個相對大小 的頁面，相當於大圖進行裁剪一樣，唄裁剪出來的這塊東西就叫visual viewport.
ideal viewport:簡單說就是手機 的寬和高組成的組成這種尺寸就叫ideal viewport。
2）width=device-width主要做了什麼事情？
width=device-width它主要的作用就是讓大圖layout viewport等於手機的ideal viewport。這樣就做到了2個不同的視窗大小 是一樣的
上圖是官方說明，簡單的說，rem的計算就是按照html的根標籤進行計算。
1）利用viewport和裝置畫素比調整基準畫素
上圖中的設計尺寸，比如5s,它的畫素是320，畫素比drp為2，這個320指的是剛才的css畫素，所以物理畫素等於320 x 2 = 640,也就是說手機的硬體提供640個真實的畫素點，這裡所說的是寬，不要考慮高。舉個粟子，如右圖裝置尺寸，比如說當你的裝置寬是375 css畫素，裝置畫素比為3，所以物理畫素為375 x 3 =1125 個物理畫素。然後通過數學的線性比我們就可以根據比例來做自適應，但這處方法在真實世界是不科學的，因為手機尺寸很多，不可能像這樣乙個乙個調整，所以這種方法不適用。
想想剛才的說的rem，我們通過裝置畫素比和viewport調整基準畫素， 我們不需要所以的裝置都 要去除以一下裝置畫素比的關係，我們是利用js自己計算，演算法就是利用上圖的1125/640這個線性比。
比如說設計尺寸下當前html字型大小 為40px,以它為基準單位，那麼到裝置尺寸下，html的字型大小為( 40 x 1125 )/ 640=71.1,然後所有的單位為rem，這樣就可以達到自適應。
2. 利用px2rem自動轉換css單位
@function torem($px)願你成為終身學習者【猿2048】www.mk2048.com
響應式與自適應設計
兩者的區別？首先，響應式和自適應最為關鍵的區別是什麼呢？簡而言之，響應式 百分比 就相當於液體，它可以自動適應不同尺寸的螢幕，無論你的裝置尺寸多麼奇葩。響應式使用css media queries的方法，根據目標裝置自動改變風格如顯示型別,寬度 高度等，這能很好解決不同螢幕尺寸的顯示問題。而自適應設...
響應式設計與自適應設計
響應式 設計與自適應 設計 相信從事前端頁面設計的人都知道，頁面呈現的效果及使用者體驗是非常重要的。當今社會移動裝置的使用已超過了pc端，面對不同解析度的裝置，怎樣做到頁面體驗的效果一樣呢？這就成了最頭疼的事情。下面我們來看看響應式 設計與自適應 設計兩者 用法 響應式web設計 responsiv...
UI設計中如何做響應式設計與自適應設計
ui設計中如何做響應式設計與自適應設計?由於科技在不斷的發展，小夥伴們上網就不單單只依靠台式電腦了，還有平板電腦膝上型電腦都是可供大家選擇的。面對不同的螢幕解析度 是如何進行適配的呢?今天aaa教育胡老師就和大家聊聊ui設計中如何做響應式設計與自適應設計?1.什麼是響應式設計?2.什麼是自適應設計?...