Как позиционировать элементы под разные разрешения экрана?

Question

[KOPC1886]

Как позиционировать элементы под разные разрешения экрана?

Есть такая верстка

<div id="showHelp" class="modal fade" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <span class="title" id="titlePrompt"></span>

    <div class="not_show" id="notShow" ng-click="checkedPrompt=!checkedPrompt">
        <span class="checkPrompt" ng-show="checkedPrompt" id="check"></span>
    </div>
    <input type="checkbox" ng-checked="checkedPrompt" class="checkBox" id="notShowCheck" hidden="hidden">

    <div class="close_prompt" id="closePrompt" ng-click="closePrompt()"></div>

    <span class="row_search" id="searchPrompt"></span>

    <span class="catalog_prompt" id="catalogPrompt"></span>

    <span class="row_service" id="servicePrompt"></span>

    <span class="row_favorite" id="favoritePrompt"></span>
</div>

function showPrompt()
{
    if($('#categoryList').length != 0)
    {
        $('#showHelp').modal('show');
        $('#showHelp').css({'overflow-y': 'hidden'});

        if($('#bx-panel').length != 0)
        {
            if($('#bx-panel').hasClass('bx-panel-folded'))
            {
                $('html, body').animate({scrollTop: 135});
                var searchPromptTop = 100,
                    servicePromptTop = 130,
                    starPromptTop = 0;
            }
            else
            {
                $('html, body').animate({scrollTop: 240});
                var searchPromptTop = 210,
                    servicePromptTop = 200,
                    starPromptTop = 0;
            }
        }
        else
        {
            $('html, body').animate({scrollTop: 95});
            var searchPromptTop = 60,
                servicePromptTop = 100,
                starPromptTop = 0;
        }

        var catalogList = $('#categoryList').offset();
        $('#catalogPrompt').offset({top: catalogList.top + 140, left: catalogList.left + 195});

        var titlePrompt = $('#titlePrompt').offset();
        var searchInput = $('#title-search-input').offset();
        $('#notShow').offset({top: titlePrompt.top, left: searchInput.left});

        $('#closePrompt').offset({top: titlePrompt.top, left: searchInput.left + 300});

        var searchCatalog = $('#blockSearch').offset();
        $('#searchPrompt').offset({top: searchCatalog.top - searchPromptTop, left: searchCatalog.left + 250});

        setTimeout(function(){
            var service = $('.a_service:first b:first').offset();
            $('#servicePrompt').offset({top: service.top - servicePromptTop, left: service.left + 80});
        }, 100);

        setTimeout(function(){
            var star = $('#star_0').offset();
            $('#favoritePrompt').offset({top: star.top - 70, left: star.left - 210});
        }, 100);
    }
}

На ноутбуках в 15 дюймов картинки располагаются верно. А на 24 нет.

Как сделать, чтобы на всех разрешениях отображалось верно?

Answer 1

[Sergii Buinytskyi]

Стесняюсь спросить, а причем здесь тег Angular.js?

Comments

[KOPC1886]

Sergey B. Просто я использую ангуляр и по привычке указал тег)

[Sergii Buinytskyi]

Код какой-то муторный. В нем фиг разберешься. Почему бы не перенести эту ношу на плечи стилей? Например, использовать Twitter bootstrap или хотя бы изучить как они модальное окно выводят.

[KOPC1886]

Sergey B.: я и использую Twitter bootstrap и делаю через модальное окно.

[Sdiwerick]

KOPC1886: А что тогда мешает сверстать модальное окно под разные разрешения и размеры?

Answer 2

[tennalian]

Ну тут 2 варианта, либо отслеживать разрешение на js, либо media-queries. Если на js, тогда прописываете до определенной ширины и после, и в каждом свои ништяки с нужными/разными значениями. В css и коню понятно, я надеюсь))

Answer 3

[Александр]

допустим что ширина при которой разъезжается 1024px

• тогда решение на css + html:
  

  // в HTML добавить
  			<meta name="viewport" content="width=device-width, initial-scale=1.0">
  			// в CSS добавить
  			@media only screen and (max-width: 1023px) {
  				// стиль для разрешения < 1024
  			}

  
  
• или же на js:
  

  if(document.body.clientWidth > 1024){
  				// как вариант добавить к body класс
  				document.body.className += 'bd1024';
  			}