Resposinve webdesign и позиционирование элементов

У меня есть небольшая виджет на моем сайте. Это окно виджетов содержит следующие элементы:Resposinve webdesign и позиционирование элементов

<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 и (max-width: 1024px) { .center-отсутствие-виджет-левый { позиция: относительная; Слева: 75 пикселей; padding-top: 13px; padding-bottom: 10px; курсор: указатель; } } ' – Lahib

Да, имейте в виду, если вы замените его на ваш оригинальный код css, там не будет стиля для других размеров экрана и будет отображаться простой html. – Max

поблагодарить u за помощь – Lahib

Resposinve webdesign и позиционирование элементов

ответ

Смежные вопросы