物理像素的物理像素是指在屏幕上显示的最小粒子，而不是物理像素点，并且实际上是真实的。 出厂时设置的。 (分辨率)我们开发时的1px不一定等于一个物理像素PC侧页，一个px不一定等于一个物理像素，但是移动侧与1px的可显示像素数不同。 被称为物理像素比或屏幕像素比物理像素比=物理像素(分辨率) /独立像素(CSS像素)
例如，iPhone X的物理像素比为3
画面尺寸独立像素(CSS像素)物理像素(分辨率) ppi/dpi (像素密度) dpr )倍图) 5.8英寸812375243611254583物理像素比被提出原因：
最初，随着1CSS像素=1物理像素或Retina (视网膜屏幕)显示技术的普及，PC和移动终端都可以通过将更多的物理像素点压缩到一个屏幕上来实现更高的分辨率，提高画面显示的精细度。
对于50px*50px的图像，如果在手机的Retina画面上打开，则按照刚才的物理像素比放大到倍数。 因此，在典型的视口设置中，图像模糊是由于iPhone 678的影响，现在存在三倍图4倍，通常使用双倍图来提高图像质量并解决高清设备中的模糊问题由于字体是向量，因此iphone8下的*/img { /*原始图像100*100px */width: 50px； height: 50px； } .box { /*原始图像100 * 100 px */background-size 336050 px 50px； }情况：
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' metaname=' viewport ' content=' width=device-width， 需要initial-scale=1.0 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' title 03-2倍图法/title/* //*我们输入100*100的图像，然后手动将此图像缩小为50*50(CSS像素)。 //*我们准备的图像比我们实际需要的大小大两倍。 这就是两倍的图像。 )/img3360 height: 50px； (} /style/headbody！ -模糊----img src=' images/apple 50.jpg ' alt='！ -双倍图--img src=' images/app le 100.jpg ' alt=' '/body/html背景缩放背景大小属性规定背景图像的大小
背景尺寸：背景图像宽度背景图像高度； 单位：长度百分比将背景图像扩展得足够大，以使背景图像完全覆盖背景区域将contain图像扩展到最大大小，使其宽度和高度完全适合内容区域的注意事项
以长度为单位，如果只写一个参数，而另一个参数按百分比自动拟合，则引用对象为父盒，只写一个参数，另一个参数自动拟合【背景缩放方案】
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' metaname=' viewport ' content=' width=device-width， initial-scale=1.0 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' title 05 -背景图像双倍图/title/*11111 height: 50px； border : 1px固态硬盘； 后台： URL (images/app le 100.jpg ) no-repeat； 背景尺寸： 50px 50px； (/style/headbodydiv/div/body/html多图切割网cutterman
一次导出多个倍数的图像
背景线性渐变background :线性渐变(开始方向、颜色1、颜色2、)； 后台：-WebKit-linear-gradient (左、红、蓝)； ack ground :-WebKit-linear-gradient (lefttop，red，blue )； 必须在背景中添加浏览器的专用前缀
起始方向可以是方位名词或度数，如果省略，缺省值为top