pc端px转换为rem针对屏幕分辨率进行页面适配
针对pc端px转换为rem以实现页面适配，常见的方法是设置父元素固定宽度并居中，但并非所有设计图都适用于此方案。接手项目时，采用栅格布局与postcss-pxtorem插件进行px转换，以使页面在pc端和移动端自适应。然而，面对5k高清等高分辨率屏幕，布局问题随之显现，原因在于根目录字号未妥善调整。查阅资料后，重新设定适配策略，但在移动端打开页面时，布局仍出现混乱。究其原因，在于px计算基于pc端宽高，而非移动端。
优化方案如下：删除html标签，确保移动端布局整体稳定，尽管此时子元素间距、宽高与设计图存在差异。若需进一步调整，可采取如下步骤：首先，确保使用npm安装并引入postcss-pxtorem插件。在vue.config.js中进行相应配置。其次，创建src/assets/js目录下的pc.js文件，并在main.js中导入此文件。通过这一系列操作，优化px转换为rem的过程，确保页面在不同分辨率下保持布局一致性，同时适应移动端需求。
下一篇：这是什么字体，谁知道
多重随机标签