Resposinve网页设计和元素定位

我在我的网页上有一个小型的widgetbox。这个小工具框包含以下几个要素：Resposinve网页设计和元素定位

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

任何人都可以帮忙吗？

来源

2015-11-27 Lahib

看看CSS媒体查询：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries – jolmos

你应该把这个线在你的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" {}

来源

2015-11-27 10:39:16 Max

所以这应该是我的CSS代码？ '@media screen and（max-width：1024px）{ .center-absence-widget-left { position：relative; left：75px; padding-top：13px; padding-bottom：10px;光标：指针; } }' – Lahib

是的，请记住，如果你用你原来的css代码替换它，那么其他屏幕尺寸就没有样式，并且会显示纯html。 – Max

谢谢你的帮助 – Lahib

Resposinve网页设计和元素定位

回答

相关问题