Css单位rem与vm

css单位

一、rem

rem是css3新增的一个相对单位，rem是根据html标签中font-size来确定1rem的大小

html{
	font-size:20px ; //也就是说1rem = 20px
}

默认： 1rem = 16px

html{
	font-size:16px; //默认值
}

二、vw

css3新单位，当前视口宽度的1/100。假设设计稿的宽度为750px,
100vw = 750px,那么 1vw =7.5px。

body{
   max-width: 750px;
}
div{
   width: 10vw; 
   height: 10vw;
   background-color: red;
}

三、em

em是相对单位，相对于父元素（font-size）

.father{
    font-size: 20px;
}

.son{
    font-size: 2em; //1em = 20px
}

四、vh

与vm类似，当前视口高度的1/100。假设设计稿的宽度为750px,
100vh = 750px,那么 1vh =7.5px。

body{
   max-height: 750px;
}
div{
   width: 10vh; 
   height: 10vh;
   background-color: red;
}

五 、px 、vw 、rem的转换

假设设计稿的宽度为750px:
100vw = 750px
1px = 0.13333333vw
100px = 13.333333vw
将html设置为

html{
	font-size:13.333333vw
}

那么：1rem = 100px = 13.333333vw

六移动端适配（插件）

1.安装

• amfe-flexible 为html、css添加font-size
• postcss-pxtorem 将像素生成rem单位

2.main.js引入amfe-flexible

3.创建postcss.config.jd文件

module.export={
	plugins:{
		"postcss-pxtorem":{
			"rootValue":75, //设计稿的十分之一 750px
			"propList":["*"] //所有的属性，将px转换rem
		}
	}

}