Javascript 试图使我的网站成为回应

我是css的新手，现在正在实习。我被指派的任务是从chrome上获取一个网站的css，使其在IE中看起来相似，然后使其具有响应性和可扩展性。所以基本上如果我把窗口变小，我希望一切都保持不变，只是变小，然后当我再把它变大时，文本就变大了。我已经完成了对IE的转换，但我发现的示例在Chrome和FF中有效，但ofc在IE中不起作用

知道我从哪里开始做这个吗

html, body {
background: none repeat scroll 0 0 #8FAE9F;
font-family: Trebuchet MS;
font-size: 27px;
font-weight: bold;
height: 99%;
margin: 0 auto;
padding: 0;
text-align: center;
}
.column.OBJ0, .column.OBJ1 {
max-width: 12.0em;
margin-right: -1.2em;
margin-left: -1.2em;
}
.blueBorder, .thresholds {
margin: 0;
padding: 5px;
width: 98%;
}
.thresholds {
display: inline;
float: left;
}
.Threshold_NONE {
color: black;
}
.Threshold_INFO {
color: green;
}
.Threshold_WARNING {
color: yellow;
}
.Threshold_ALERT {
color: red;
}
.Threshold_INFO, .Threshold_WARNING, .Threshold_ALERT, .Threshold_NONE {
font-size: 5em;
}
.displayText {
}
.column {
display: inline-block;
float: left;
margin: 0;
padding: 0;
text-align: center;
vertical-align: text-top;
line-height: normal;
white-space: nowrap;
}
.header {
color: black;
font-size: 3em;
margin-left: -4px;
margin-right: -4px;
margin-top: -4px;
max-height: 1em;
}
.columnwrapper {
min-width: 378px;
text-align: center;
white-space: nowrap;
width: 25%;
}
.displayAgent {
}
.displayAgent img {
float: left;
margin-bottom: auto;
margin-right: 0.5em;
margin-top: auto;
}
.displayAgent1 {
}
.displayAgent2 {
background-color: #E6E6E6;
}
.displayAgentName {
display: table;
text-align: right;
}
.displayAgentStatusImg {
padding-left: 0.5em;
}
.displayAgentStatus {
display: inline;
width: 71px;
}
.displayAgentStateTime {
display: inline;
width: 61px;
}
.displayAgentStatus_LoggedIn {
}
.displayAgentStatus_NotReady {    
}
.displayAgentStatus_Ready {
}
.displayAgentStatus_Reserved {
}
.displayAgentStatus_LoggedOut {
}
.displayAgentStatus_Talking {
}
.displayAgentStatus_Working {
}
div .displayAgentStateTime {
display: none;
}
div .displayAgentStatus {
display: none;
}
.PoweredBy {
bottom: 10px;
display: none;
font-size: 0.8em;
padding: 5px;
position: fixed;
right: 10px;
}
.lastupdate {
background: none repeat scroll 0 0 white;
display: table;
font-size: 1.2em;
margin-top: 0;
width: 7em;
}
.viewerDisplayItemErrorPanel {
color: red;
font-weight: bold;
}
.headline.remedyItem {
font-weight: bold;
}
.remedyItem span {
display: inline-block;
font-size: 1em;
max-height: 1.2em;
overflow: hidden;
}
div.headline.remedyItem {
text-align: center;
border-bottom: 4px solid;
}
span.remedyId {
width: 6em;
}
span.remedyCustomer {
width: 6em;
}
span.remedyPriority {
width: 2em;
}
span.remedyCaseTitle {
text-align: left;
width: 17em;
}
span.remedySLA {
width: 5em;
}
span.remedySubSlaType {
display: none;
}
span.remedyHidden {
}
span.remedyShowSLA {
width: 4em;
}
span.remedyGroup {
width: 6em;
}
div.column.Remedy {
clear: left;
margin-top: 0.5em;
}
div.column.Remedy h2 {
display: none;
}
div.uccx_exchange_user span.exchangeStatus {
display: none;
}
div.uccx_exchange_user span.uccxStatus {
display: none;
}

div.uccx_exchange_user span.user {
display: inline-block;
font-size: 1em;
width: 3.9em;
}
div.uccx_exchange_user {
max-height: 0.92em;
}
div.uccx_exchange_user img {
margin-top: 0.2em;
padding: 0;
}
.viewerDisplayItemShowPanel.øst {
clear: right;
float: right;
text-align: left;
}
.viewerDisplayItemShowPanel.vest {
clear: left;
float: left;
text-align: right;
margin-left: 1.5em;
}
.viewerDisplayItemShowPanel.øst div img {
float: center;
margin-left: -5.6em;
margin-right: 0.0em;
}
.viewerDisplayItemShowPanel.vest div img {
float: center;
margin-left: -0.8em;
margin-right: 0.1em;
}

.column h2.header {
font-size: 2.0em;
margin: 0;
}
.headline.remedyItem .remedyPriority {
background: none repeat scroll 0 0 red;
display: none;
}
.headline.remedyItem .remedyCustomer {
margin-right: 3em;
}
span.NOT_SET {
color: white;
}
div.FIX_AT_NONE .remedyId {
color: yellow;
}
span.NORMAL_ALERT, span.FIX_AT_ALERT {
color: red;
}
span.NORMAL_WARNING, span.FIX_AT_WARNING {
color: yellow;
}
span.NONE_WARNING, span.NONE_NONE {
color: blue;
}
span.NONE_ALERT {
color: purple;
}
.BURNED {
color: red;
}
.P1.remedyPriority {
background-color: red;
}
.P2.remedyPriority {
background-color: yellow;
}
span.RESPECTED {
color: green;
}
span.remedyUserLoginID {
display: none;
}
span.penaltyOn {
display: none;
}

---

你的目标是IE的哪些版本

另外，我假设您正在嵌套HTML标记，使用EM是基于父级的字体大小，而不是正文，也许可以尝试使用REM

我建议大家仔细阅读以下内容：

---

你也可以发布你的HTML吗？

你的问题有两个方面：一是使其与IE兼容，二是使其具有响应性

对于您提到的响应性部分，看起来您只是想将所有内容缩小，您可以用%定义样式，但这不会被称为响应性网站，因为所有内容都将被缩放，并且不可读或用户友好

另一方面，响应意味着通过使用媒体查询来改变布局，同时让用户可以轻松读取所有内容，并将悬停事件等转换为触摸事件，以便在触摸屏设备上也可以访问

---

所以，如果你能明确你的要求，那就太好了。如果您只是需要一些合适的东西，请坚持使用%s或尝试媒体查询以使其完全响应：）

公司想要的可能是同时打开两个不同的窗口。然后，因为他们必须缩小尺寸以适应两个屏幕，所以他们希望所有内容都保持在全屏时的位置，当然，所有内容都要小一点，以便适合。因此，我希望所有内容都保持在同一位置，但只是更小。然后，你应该使用%作为布局，使用EM作为字体大小，这就足够了，为了防止所有内容无法阅读，你可以为你的网站定义最小宽度，如768px或其他你认为你的客户会满意的东西。是的，但我到底该怎么做，因为这是我第一次真正深入研究css，老实说，通常我是在编程：）你应该看看一些基本的HTML/css教程，它们会为你清除很多东西：）你还必须浏览你的css，看看哪些元素有固定的像素尺寸，然后逐个更改它们。我知道这需要很多工作，而且根据我的经验，将一个网站转换为响应式网站比创建一个网站要困难得多：DSo将所有像素转换为EM，然后用%？：）计算屏幕的宽度等。）最新的，所以我猜应该是11:）不确定嵌套HTML标记的意思，但我只接触css，这是唯一的工作，我自己还没有得到HTML，除了F12:）