老师，不改变缩放的话，页面浏览的效果会不同吗
比如 一个设备。在设备dpr为1的时候，css里写的1px就会被设备渲染1个物理像素。在设备dpr为2的时候，css里写的1px就会被设备渲染2个物理像素。
这样的话，虽然高清屏渲染了两个像素，但是和我们需要的显示效果是一样的呀，如果改变缩放0.5的话，不是会让元素浏览的时候显得变小吗？
正在回答
同学你好，解答如下：
1、将设计稿设置成750的确是为了显示效果更精细。
2、有些设备，尤其是比较老的设备，不支持0.5px这个尺寸。将元素设置成0.5px后，显示效果与1px并没有区别，看不出来它是0.5px的，所以就采取了缩放的方式。即由于缩放这种方式兼容性好，所以我们会使用该方式实现解决1px的问题。
3、同学的理解是对的，其实就是缩放css的大小，只是有的设备并不支持0.33、0.5这么小的尺寸，所以有了通用适配。还有一个问题就是，如果手动缩放1px，那你需要写很多个样式，因为页面会在不同的设备下显示，你不能只将元素设置成0.33px，需要根据dpr，写多个样式；比如设置元素在dpr为2的时候是0.5px，在dpr为1的时候是1px，这样代码写起来也比较麻烦。综合一看，还是通用适配更方便。
如果不考虑1px问题，则使用简单适配就可以了。
祝学习愉快！
同学你好，解答如下：
1、高清屏的1px和标清屏的1px（css像素）代表的实际大小是一样的。
2、之所以有了通用适配，是因为存在“1px”的问题。
实际开发中，最常见的设计稿是参考iphone6来制作的。所以我们在写页面的时候，会将模拟器调成iphone6，这样就与设计稿对应，能一比一还原设计稿。该设计稿通常有两个尺寸，一个是宽度是375px，一个是宽度是750px。
如果设计稿是375px的，由于设计稿宽度与设备屏幕宽一致，则不存在1px问题，即：此时在css中写1px，就对应着设计稿上的1px。
当设计稿是750px时，由于iphone6的屏幕宽（可以理解成html的宽度）是375px，如果元素在设计稿上是1px，假设我们在css中也将其设置成1px，那么实际的效果就是页面上的1px要比设计稿上的粗，这就是“1px”的问题。
原因是：页面上的1px，对应的html宽度是375；而设计稿上的1px，对应的宽度是750；二者有个2倍关系，所以看起来不一样粗。
解决该问题的办法就是“通用适配”。“通用适配”后，页面的html宽就会变成750，此时页面上的1px，就对应宽度是750了，就与设计稿一致了，所以效果会与设计稿一致：
3、下图中的理解：
视口是375px的，假设设计稿也是375的，则不存在1px的问题，视口与设计稿是一比一关系，将元素设置成375px就能覆盖整个视口。但是设计稿不一定是375的，可能是750的。在750的设计稿上，元素需要设计成750px宽，才是充满视口的效果。此时元素宽度就是750，而视口是375的，那么在页面上按照设计稿的尺寸，将元素设置成750，则页面会有滚动条，所以效果是不对应的。
祝学习愉快！
我看了其他同学的老师解答“通用适配方案不会影响到手机的分辨率和页面清晰度，主要是为了解决1px边框的问题，因为1px问题主要是指设计稿上的1px，与页面上的1px视觉效果不对应（针对iphone这种高清屏），页面上的1px看着会厚重一些（粗一点）。实际开发中，设计师要的是1物理像素的边框，而设计稿都是750的，即对应着视口为750px的机型（iphone6），所以当视口是750px时，页面上的1px才对应着设计稿上的1px，如果视口是375px的，那么我们在页面上设置的1px实际对应着设计稿上的2px。所以为了还原设计稿上的1px，我们在适配时，通过dpr调整initial-scale参数的值，从而让视口和设计稿一样宽，达到UI设计师的要求”
还是不太理解，比如说视口是375px *750px的iphone6，如果我设置一个div 宽是375px，高是750px，那他就是刚好覆盖了整个视口，也没有多出去一倍呀。
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星