rem做响应式

rem

1.浏览器默认字体大小为16px。
2.rem兼容性： IE9+、火狐、谷歌、safari、欧朋主流版本都支持了 rem。

食用方法：（html根元素 + 百分比 + 媒体查询）

1. rem只是相对于根元素html标签的font-size，即px与rem的换算都基于html根元素的大小来算的。如：要设置 16px为1rem，那么根元素html就设置为100%（16px / 浏览器默认字体大小）以此类推。
2. html设置之后，其他元素都按 需要的字体大小 / 跟元素 字体大小 换算为rem来设置即可，如 1rem = 16px， 要设置 32px就可以 写 body：font-size：2rem

举个栗子

一、）1rem = 16px

换算公式： 1rem = 16px 0.0625rem = 6.25% = 1px 1.25rem = 125% = 20px

设置根元素 html的字体大小 即 1rem = 多少px 
html {
	font-size: 16px; /* 1rem = 16px */
}
其他标签 按照rem 或 百分比 来定义字体大小即可

body { /* 16px */
	font-size: 100%;
	font-size: 100%; /* 两个都写的话 可以防止不兼容 rem的低版本浏览器 */
}

媒体查询设置各个尺寸设备下的字体大小 
@media only screen and (min-width: 320px) {
	html {
		font-size: 12px; /* 12px  12除以100% */
	}
}
@media only screen and (min-width: 640px) {
	html {
		font-size: 20px; /* 20px  20除以100% */
	}
}

二、）1rem = 100px

换算公式： 1rem = 100px 0.01rem= 1% = 1px 0.2rem = 20% = 20px

设置根元素 html的字体大小 即 1rem = 多少px 
html {
	font-size: 100px; /* 1rem = 100px  100 / 16  = 6.25 即625% */
}
其他标签 按照rem 或 百分比 来定义字体大小即可

body { /* 16px */
	font-size: 16%;
	font-size: 0.16rem; /* 两个都写的话 可以防止不兼容 rem的低版本浏览器 */
}

媒体查询设置各个尺寸设备下的字体大小 
@media only screen and (min-width: 320px) {
	html {
		font-size: 75px; /* 12px  12除以0.16 */
	}
}
@media only screen and (min-width: 640px) {
	html {
		font-size: 125px; /* 20px  20*0.01 */
	}
}

三、）顺便说下 媒体查询

@media、@media screen、@media only screen的区别

• @media 表示适应所有媒体
• @media screen 表示适应 媒体类型为 screen的硬件设备
• @media only screen 表示 防止在不支持媒体查询的浏览器中 样式被忽略

max-width 和 min-width 的区别

• max-width 小于当前尺寸的设备
• min-width 大于当前尺寸的设备