Yadalay
@Yadalay
Php, Mysql, Html, Css, Js/Jquery/Ajax, Laravel

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

Добрый день!
Возникла идея сделать страничку, которая представляет из себя комнату. В этой комнате находятся: стол, окно, ПК, лампа и т.д.
Вот визуальный пример этой комнаты - joxi.ru/nAyb3QPU355YrZ.jpg
Html код страницы - стандартный шаблон bootstrap. Ничего своего я не добавлял.
Css код страницы:
html, body{
    height: 100%;
}

body {
    background: #2C3E50 url(../images/background.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Хочу сделать так, чтобы некоторые элементы этой комнаты были кликабельны: нажал на пк - появилось окно с одной информацией, нажал на окно - другой действие. Для этого нужно использовать position: absolute с координатами. Но если я для своего разрешения экрана смогу задать точное позиционирование, то при других разрешениях будут сдвиги. Подскажите, пожалуйста, как мне сделать грамотное позиционирование для любого разрешения экрана?
  • Вопрос задан
  • 450 просмотров
Решения вопроса 1
yarkov
@yarkov Куратор тега JavaScript
Проект "Жизнь после смерти" - lifeafterdeath.ru
Если бы для одного разрешения, то я бы сделал так:
tag_area
UPD#1: Нашел то что вам нужно: image-map-resizer
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@semki096
в процентах
Ответ написан
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Вообще, такие вещи делаются в SVG или канвасе. Но если нужна именно картинка - можно сделать через:
1. Относительное масштабирование кликабельной зоны, наложенной на изображение.
При этом - можно организовать "фонарик" или бордер на изображение, выделяя элемент на который навели курсор. Что-то вроде 2D raycasting.

2. Также можно создать слой под слоем ("пирог") через z-index, нарезав кликабельные куски изображений и вставив их в каждый слой с абсолютным ПРОЦЕНТНЫМ! смещением внутри контейнера. Будет что-то вроде сегментированной аппликации и в целом - получите ту же самую картинку с нужным функционалом.
Ответ написан
Ваш ответ на вопрос

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

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