How to position elements for different screen resolutions?

Question

css

How to position elements for different screen resolutions?
There is such layout

<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);
    }
}

On laptops of 15 inches, the pictures are located correctly. But not on 24.
How to make it display correctly at all resolutions?

Answer 1

I'm embarrassed to ask, but what does the Angular.js tag have to do with it?

Answer 2

Well, there are 2 options, either to track the resolution on js, or media-queries. If on js, then you write up to a certain width and after, and each has its own goodies with the necessary / different values. In css and the horse is clear, I hope))

Answer 3

let's say that the width at which the diverges 1024px

• then the solution on css + html:
  

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

  
  
• or in js:
  

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