@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 нет.

Как сделать, чтобы на всех разрешениях отображалось верно?
  • Вопрос задан
  • 3057 просмотров
Пригласить эксперта
Ответы на вопрос 3
boonya
@boonya
Backend developer (Python/PHP)
Стесняюсь спросить, а причем здесь тег Angular.js?
Ответ написан
tennalian
@tennalian
Ну тут 2 варианта, либо отслеживать разрешение на js, либо media-queries. Если на js, тогда прописываете до определенной ширины и после, и в каждом свои ништяки с нужными/разными значениями. В css и коню понятно, я надеюсь))
Ответ написан
Комментировать
допустим что ширина при которой разъезжается 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';
    			}

Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы