物理像素&物理像素比 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。出厂就设置好了。(分辨率)我们开发时候的1px不一定就等于1个物理像素PC端页面，1个px等于1个物理像素，但是移动端就不尽相同1个px的能显示的像素个数，称为物理像素比或屏幕像素比
物理像素比 = 物理像素（分辨率） / 独立像素（CSS像素）
例如：iPhone X 的物理像素比为 3
物理像素比提出的原因：
在早期，PC及移动端都是：1CSS像素 = 1物理像素随着Retina（视网膜屏幕）显示技术的普及，可以将更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。 多倍图 对于一张50px*50px的图片，在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题通常使用二倍体，是因为 iPhone 6\7\8 的影响，但是现在还存在 3倍图4倍图 的情况，这个要看实际开发需求背景图片要注意缩放问题字体不用考虑缩放问题，因为字体是矢量的，不会失真 /* 在 iphone8 下面 */ img { /* 原始图片100*100px */ width: 50px; height: 50px; } .box { /* 原始图片100*100px */ background-size: 50px 50px; }案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>03-二倍图做法</title> <style> /* 我们需要一个50*50像素（css像素）的图片，直接放到我们的iphone8里面会放大2倍100*100就会模糊 */ /* 我们采取的是放一个100*100图片，然后手动的把这个图片缩小为50*50（css像素）*/ /* 我们准备的图片比我们实际需要的大小大2倍，这就方式就是2倍图 */ img:nth-child(2) { width: 50px; height: 50px; } </style> </head> <body> <!-- 模糊的 --> <img src="images/apple50.jpg" alt=""> <!-- 我们采取2倍图 --> <img src="images/apple100.jpg" alt=""> </body> </html> 背景缩放background-size属性规定背景图像的尺寸
background-size: 背景图片宽度 背景图片高度; 单位：长度 | 百分比 | cover | containcover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域contain 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域注意：
以长度为单位时，只写其中一个参数，另一个参数会自动适配以百分比为单位时，其参照对象为父盒子，只写其中一个参数，另一个参数会自动适配【背景缩放案例】?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>05-背景图片2倍图</title> <style> /* 1. 我们有一个50*50的盒子需要一个背景图片，但是根据分析这个图片还是要准备2倍，100*100 */ /* 2. 我们需要把这个图片缩放一半，也就是 50*50 background-size*/ div { width: 50px; height: 50px; border: 1px solid red; background: url(images/apple100.jpg) no-repeat; background-size: 50px 50px; } </style> </head> <body> <div></div> </body> </html> 多倍图切网 cutterman一次性导出多种倍数的图片
背景线性渐变? background: linear-gradient(起始方向，颜色1，颜色2，...); background: -webkit-linear-gradient(left,red,blue); background: -webkit-linear-gradient(left top,red,blue);背景渐变必须添加浏览器私有前缀
起始方向可以是：方位名词 或者 度数，如果省略? ，默认就是top?
?
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
