rem em px的区别 响应式布局的常用解决方案

一、px

px像素。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
px是固定单位，一旦设定 在任何屏幕下显示的大小都是一样的。即无法根据页面大小自适应。
px是css像素

DRP(设备像素比)
1 DRP = 物理像素/分辨率；
在不缩放的情况下，一个css像素就对应一个drp 也就是说 在不缩放的情况下
1 css像素 = 物理像素（也称为设备像素 只与设备或者说硬件有关系）/分辨率

我们在网页中设置的font-size统一为16px 在pc端中文字正常显示，而在移动端文字很小 几乎看不到，说明 css中1px并不是固定大小。

px+media(媒体查询)实现响应式布局

使用@media媒体查询 针对不同的屏幕大小 设置不同的样式
**缺点：**在浏览器大小改变时，需要改变的样式太多，多套样式代码繁琐。

@media screen and (max-width: 960px){
   
	body{
   
		background: red;
	}
}
@media screen and (max-width: 768px){
   
	body{