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網頁設計和元素定位

回答

相關問題