HarmonyOS 鸿蒙Next设计稿720宽度下如何兼顾直板机、折叠屏各形态、平板？用什么像素单位？

HarmonyOS 鸿蒙Next设计稿720宽度下如何兼顾直板机、折叠屏各形态、平板？用什么像素单位？开发背景：NEXT4.0系统，api10；

设计稿是按照degisnWidth:720 给的，要求做到1:1还原，同时在调研折叠屏的展示方案。

目前开发是按照直板机来的，并且使用lpx像素单位时能够1:1还原设计稿。但是遇到折叠屏/平板时会同比例放大特别难看，不符合要求

如果用默认单位vp的话，vp的设备宽度不为720，无法做到1;1还原设计稿，并且可能会遇到换行等问题。

求华为大神指点

更多关于HarmonyOS 鸿蒙Next设计稿720宽度下如何兼顾直板机、折叠屏各形态、平板？用什么像素单位？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Navigation + 响应式设计

楼主，你们现在有具体的方案了吗？还是使用lpx单位吗？

caililin 4楼作者

感谢回复。

目前我们的设计同学和开发同学也是按照固定360的宽度来的，这个没问题
但是目前我们收到的直板机，还有鸿蒙折叠屏的单屏，宽度并不是固定的360（单位vp），所以给我们造成困扰。如果用了lpx为单位的话，折叠屏展开态又会等比例放大了，

目前我们的设计同学和开发同学也是按照固定360的宽度来的，这个没问题

可以容忍一套设计稿同时应用于横竖屏布局？

但是目前我们收到的直板机，还有鸿蒙折叠屏的单屏，宽度并不是固定的360（单位vp），所以给我们造成困扰。如果用了lpx为单位的话，折叠屏展开态又会等比例放大了

设计稿是在约束下设计出来的，最终被应用的设备会出现不一样宽度。

如果要1比1满意，按照设备屏幕单独设计

如果可以接受以宽为基准的设计规范，可以考虑设计不同分辨率的缩放规范，或者按照场景设计多套基础设计稿（比如：横竖屏，可以出两套图），

在HarmonyOS鸿蒙Next设计稿中，为了兼顾直板机、折叠屏和平板等多种设备形态，设计时可以采用**虚拟像素单位（vp）**作为主要的设计单位。虚拟像素单位是鸿蒙系统提供的一种与设备屏幕密度无关的计量单位，能够根据设备的屏幕密度自动调整，确保在不同设备上呈现一致的视觉效果。

对于720宽度的设计稿，可以使用vp作为基础单位进行设计。例如，1vp在720宽度的屏幕上可能对应1个物理像素，但在其他屏幕密度不同的设备上，1vp会自适应为不同的物理像素值。这样可以确保设计在不同设备上保持一致的布局和比例。

此外，鸿蒙系统还提供了**fp（字体像素单位）**用于字体大小的定义，确保字体在不同设备上显示效果一致。

总结：在HarmonyOS鸿蒙Next设计稿中，使用**虚拟像素单位（vp）**作为主要设计单位，能够有效兼顾直板机、折叠屏和平板等多种设备形态，确保设计在不同设备上的一致性。