响应式网页设计和元素定位

Question

我的网页上有一个小部件框。此小部件框包含以下元素：

<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 元素会对此做出响应并进行调整？

有人可以帮忙吗？

Answer 1

你应该把这一行放在你的 HTML <head> 标签中：

<meta name="viewport" content="width=device-width, initial-scale=1">

这些是您应该使用的媒体查询。如果您在媒体查询之外设置 class 样式，它将成为 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" {}

响应式网页设计和元素定位

Resposinve webdesign and positioning of elements

css

asp.net

asp.net-mvc

asp.net-mvc-3