移动端布局 - 物理像素和物理像素比

---

前言

手机和电脑的屏幕都是由一个个的像素点排列组成的.
电脑端的1px和一个物理像素是一一对应的.

一、物理像素比

一个px能显示的物理像素点的个数, 称为物理像素比.

二、二倍图

如果一个图片的像素为5050, 直接放到手机端, 就会放到2倍, 图片就会变得模糊.
解决方法是放一个100100的图片, 然后手动把这个图片缩小为50*50

img {
	width: 50px;
	height: 50px;
}
.box {
	/* 原始图片为100px*100px */
	background-size: 50px 50px;
}

三、背景缩放

background-size 属性规定背景图像的尺寸

backgroud-size: 背景图片宽度 背景图片高度;

如果只写一个参数, 表示的是宽度, 高度省略会等比例缩放

单位

• 单位可以是长度 , 百分比 , cover , contain;
• cover : 把背景图片扩展至足够大, 以使背景图像完全覆盖背景区域
• contain 把图像扩展至最大尺寸, 以使其宽度和高度完全适应内容区域.