如何通过在CSS上同时使用百分比和像素来使整个项目具有响应能力？

Question

我需要使html / css / javascript网站具有响应性。

我读了很多关于使用百分比而不是像素的信息。但问题是，我已经在CSS中使用了250+像素。有什么方法可以解决此问题，而无需将它们全部更改为百分比并使用@media查询？

我的代码的一些示例：

.main-image {
  height: 100px;
}

footer {
  position: fixed;
  height: 50px;
}

.dropdown-content {
  list-style-type: upper-roman;
  margin: 0;
  padding: 40px;
}

nav a.admin_page {
  float: right;
  font-size: 1.5em;
  padding: 14px 30px;
  border: none;
}

.text {
  color: #f2f2f2;
  font-size: 20px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 50%;
  margin-left: 300px;
  text-align: center;
  background-color: #80af2b;
}

如您所见，我使用了很多px来表示不同的值。有什么简单的方法可以解决此问题？