要实现部署后将所有的视口单位转换为像素，可以使用CSS的@media规则配合JavaScript来实现。

首先，在HTML的标签中添加以下代码：

这个标签用于设置视口的宽度和初始缩放比例。

然后，在CSS文件中，使用@media规则来定义不同宽度下的样式。例如，假设你想在宽度小于600px的情况下，将所有的视口单位转换为像素，可以这样写：

@media (max-width: 600px) {
  /* 这里是宽度小于600px时的样式 */
  /* 将所有的视口单位转换为像素 */
  /* 例如，将rem单位转换为像素 */
  html {
    font-size: 16px;
  }
}

最后，在JavaScript文件中，监听窗口大小的变化，当窗口宽度小于600px时，动态添加一个类名到元素上，例如viewport-pixel，这样就可以触发上述定义的样式：

window.addEventListener('resize', function() {
  if (window.innerWidth < 600) {
    document.documentElement.classList.add('viewport-pixel');
  } else {
    document.documentElement.classList.remove('viewport-pixel');
  }
});

这样，当窗口宽度小于600px时，会将元素的类名设置为viewport-pixel，触发对应的样式。

注意，以上代码只是一个示例，你可以根据具体需要进行调整。同时，也可以使用其他方法来实现类似的效果，这只是其中一种解决方案。