我的网页上有一个小部件箱。这个小部件框包含以下元素：
<table class="absence-widget-table">
<tr>
<td class="absence-widget-left">
<i class="fa fa-chevron-left" title="Next" aria-describedby="ui-tooltip-1"></i>
</td>
<td class="absence-widget-center" id="absence-date-container">
@Html.Partial(MVC.ActivityWidget.Views.Partials.MyActivityAbsenceDateChanger, Model)
</td>
<td class="absence-widget-right">
<i class="fa fa-chevron-right" title="Previous"></i>
</td>
</tr>
</table>
这些元素在我的css文件中有以下样式：
.center-absence-widget-left {
position: relative;
left: 604px;
padding-top: 13px;
padding-bottom: 10px;
cursor: pointer;
}
.center-absence-widget-right {
position: relative;
left: 640px;
padding-top: 13px;
padding-bottom: 10px;
cursor: pointer;
}
.center-absence-widget-center {
position: relative;
left: 620px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
white-space: nowrap;
width: 15%;
}
我想知道的是，我如何为这些元素添加响应设计，这样当页面没有在分辨率较低的屏幕上打开时，html元素就会对此做出响应并进行调整？
有人能帮忙吗？
您应该将这一行放在HTML <head>标记中：
<meta name="viewport" content="width=device-width, initial-scale=1">
这些是您应该使用的媒体查询。如果在媒体查询之外设置类的样式，则它将是该class或id的默认样式。
例如，您设置class的样式，并且仅对移动@media (max-width: 479px)...使用媒体查询。如果您更改为不同的屏幕大小（如平板电脑），它将使用您在媒体查询之外定义的屏幕大小
移动：
@media (max-width: 479px){
"your .class or #id here" {}
}
平板电脑：
@media (min-width: 480px) and (max-width: 1024px){
"your .class or #id here" {}
}
桌面：
"your .class or #id here" {}