Как зафиксировать текст на определенном месте страницы (при медиазапросах)?

Question

[mod133]

Здравствуйте! Подскажите пожалуйста правильный или оптимальный вариант реализации задумки. Текст должен находиться рядом с зелеными кружками при медиазапросах. Пока там только "РЕГИСТРАЦИЯ" (см. скрин), но каждому зеленому кружку будет привязан подобный.
Пока реализовал через position: absolute, присваивая разные значения в разных точках медиазапроса, но сомневаюсь в правильности. Буду очень признателен за совет

Comments

[Kovalsky]

"Текст должен находиться рядом с зелеными кружками при медиазапросах" - чиво?

[Ankhena]

Указывайте значения в процентах и отсчитывайте от середины.

Answer 1

[Ankhena]

Примерно так: https://jsfiddle.net/c3948dbv/

Для простоты блок обертку сделала всегда одинаковых пропорций 2 к 1. Иначе пришлось бы еще media писать и для размеров и для ориентации.
Картинку пришлось заскринить и получилась она 290х328. Отсюда, с учетом пропорций блока background-size 30% 67.93%

Comments

[mod133]

Это работает, помогите понять как Вы переводили в процентные соотношения размер картинки?

[Ankhena]

mod133,
картинка у меня вырезалась 290х328 (можете вырезать квадратной, будет легче :) мне было проще проценты посчитать, чем ее подгонять)
я решила (от балды), что по ширине картинка должна занимать 30% блока - это первое значение в background-size
значит, если бы блок-родитель был квадратным, то по высоте получилось бы 33,93%
но блок-родитель не квадратный, а с соотношением сторон 2:1, значит процент который занимает картинка по высоте нужно умножить на 2 = 67,86 (ага, на jsfiddle ошиблась пока печатала, поправьте)

[Ankhena]

mod133,

right: 65%;
  bottom: 63%;

эти проценты нужно считать через середину, потому что картинку спозиционировали ровно в середину
right 50% + половина от ширины картинки, вся картинка 30%, половина - 15%
bottom - просто подбором, потому что кто ш его знает как считать и на дворе была глубокая ночь

[Ankhena]

mod133, Перевод шрифта в vw хорошая статья: https://www.smashingmagazine.com/2016/05/fluid-typ...

[mod133]

Спасибо огромное за помощь!

Answer 2

[Сергей Сунцев]

Как я понимаю, у вас приложение должно работать, на конкретных разрешениях, тут я вижу 2 варианта.
Самый очевидный, это выписать координаты всех точек, начала текста при конкретных медиа запросах и установить его, через абсолютное позиционирование.
Второй вариант более сложный - это вычислить кривую изменения изображения в зависимости от разрешения экрана. в Формуле "x=..." x- будет являться точкой при разных разрешениях. И в соответствии с полученным результатом, через JS прописывать абсолютную позицию, уже не завися от медиа запросов.

Второй вариант считаю более грамотным, покуда везде всё будет нормально смотреться при любом разрешении и на любом девайсе, но придется вспомнить школьный курс математики)

UPD, есть в css ещё волшебное свойство calc, через которое также можно задать пропорции, при этом удобно комбинируя vw и px можно достичь приемлемого результата

Answer 3

[ned4ded]

Доброго дня.

Предлагаю обернуть куб в контейнер, контейнеру задать относительное позиционирование (p: relative). Текст с p: absolute внутри такого контейнера будет позиционироваться относительно своего родителя, а не страницы. Если размер контейнера не будет изменяться, то не будет изменяться и позиция текста внутри этого контейнера.