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或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网页设计和元素的定位

1 个答案: