前端开发常用单位

像素（px）

特点：

不随视口变化改变大小

百分比（%）

特点：

1. 跟父元素的宽高有关
2. 子元素的宽高分别有父元素的对应的宽和高决定
3. 子元素的margin和padding设置百分比计算依据是父元素的宽度
4. border不能设置百分比

例子：

宽和高

.father{
	width:200px;
	height:100px;
}
.child{
	width:50%;/*200*50%=100px*/
	height:50%;/*100*50%=50px*/
	}

padding

.father{
	width:200px;
	height:100px;
}
.child{
	padding-top: 50%;/*200*50%=100px*/
    padding-bottom: 50%;/*200*50%=100px*/
    padding-left: 50%;/*200*50%=100px*/
    padding-right: 50%;/*200*50%=100px*/
	}

margin

.father{
	width:200px;
	height:100px;
}
.child{
	margin-top: 50%;/*200*50%=100px*/
    margin-bottom: 50%;/*200*50%=100px*/
    margin-left: 50%;/*200*50%=100px*/
    margin-right: 50%;/*200*50%=100px*/
	}

em

特点

相对于当前元素的font-size，当前元素没有设置，则向上查找父元素，直到找到设置font-size

rem

特点

1. 相对于html下的font-size进行计算，1rem=htlm下font-size大小
2. 若html没有设置font-size大小，则有浏览器默认的字体大叫决定，chrome默认font-size=16px

vh(Viewport Width)&vw(Viewport Height)

特点

1. 动态单位，依据浏览器视口大小
2. 将浏览器视口大小分成100份，1vw就占用视口宽度的百分之一, 1vh就占用视口高度的百分之一

vmin&vmax

特点

1. vmin: vw和vh中较小的那个
2. vmax: vw和vh中较大的那个
3. 使用场景: 保证移动开发中屏幕旋转之后尺寸不变

视口

什么是视口?

视口简单理解就是可视区域大小我们称之为视口
在PC端，视口大小就是浏览器窗口可视区域的大小
在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了980

移动端自动将视口宽度设置为980带来的问题

虽然移动端自动将视口宽度设置为980之后让我们可以很完美的看到整个网页，但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的，所以为了能够在较小的范围内看到视口中所有的内容, 那么就必须将内容缩小

如何保证在移动端不自动缩放网页的尺寸?

通过meta设置视口大小

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width 设置视口宽度等于设备的宽度
initial-scale=1.0 初始缩放比例, 1不缩放
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放