移動端布局計算

Flex：采用Flex布局的元素，它的所有子元素自動成為容器成員，可以自動分配空間，更適合做移動端開發(fā)
rem：在不同的設備上顯示不同的效果，因此更適合做移動端開發(fā)

移動設備常見屬性

• physical pixel：物理像素值，（屏幕分辨率）
• device-independent pixel：設備獨立像素（當前瀏覽器的寬高）
• device pixel ratio：設備像素比（設備像素比 = 物理像素 / 設備獨立像素）
• PPI：每英寸的像素值

Viewport（指設備的屏幕上能用來顯示網頁的區(qū)域）

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user->scalable=no">
/*參數(shù)說明
width : 設置layout viewport 寬度，值為一個正整數(shù)，或字符串"width-device"
height：設置layout viewport 高度，這個屬性很少使用
initial-scale：設置頁面初始縮放值，值為一個數(shù)字，可以是小數(shù)
minimum-scale : 設置頁面最小縮放值，值為一個數(shù)字，可以是小數(shù)
maximum-scale : 設置頁面最大縮放值，值為一個數(shù)字，可以是小數(shù)
user-scalable : 是否允許用戶進行縮放，值為"no"或"yes"
*/

CSS度量單位

• em：相對長度單位，相對于當前對象內文本的字體尺寸，根據父元素的大小變化而變化
• rem：相對長度單位（r指root），相對于根元素（即 html 元素）font-size 的倍數(shù)，不會被它的父元素影響
• vw：相當于視窗高度的 %，單位為vw
• vh：相當于視窗寬度的 %，單位為vh