Вопрос Вопрос по вёрстке

[Inoi]

Привет!
Обозначу сразу несколько пунктов

• Я не верстальщик, и просто обладаю какими-то базовыми понятиями про то как это примерно работает - дивы, стили, хтмл теги. Умел верстать я последний раз таблицами лет двадцать назад.
• Я понимаю, что учится вёрстке сразу на сборщиках - быть ебучим дауном, и начал параллельно учиться базовой вёрстке.

Просто я шизоид, который считает что хочешь сделать хорошо = делай всё сам, а тут так сказать живая необходимость, ничего к сожалению не сделаешь.
Но я всегда предполагаю, что я просто даун, который чего-то не знает. Обычно это так и есть, особенно когда ты сразу лезешь куда-то, куда без базовых знаний лезть не надо.

Теперь к вопросу.

Спойлер: Вот у нас есть макет

Начинаем с базы

Вот так выглядит его хтмлОЧКА

<div class="npc" v-if="active">

    <!-- ID 1 -->
    <div class="npc-content" id="npc-1">
        <div class="npc_name">Jess Engminton</div>
        <div class="npc_title">Следящая за погодой</div>
        <div class="npc_question">Каждый из нас понимает очевидную вещь: дальнейшее развитие различных форм деятельности позволяет оценить значение экономической целесообразности принимаемых решений. Но интерактивные прототипы подвергнуты целой серии.</div>
        <div class="npc_answers">
            <div class="npc_answer" @click="choose(lcpd1)">Да, согласен, узнал. А ты меня узнал?</div>
            <div class="npc_answer" @click="choose(lcpd2)">Да, согласен, узнал. А ты меня узнал?</div>
            <div class="npc_answer" @click="choose(lcpd3)">Да, согласен, узнал. А ты меня узнал?</div>
            <div class="npc_answer" @click="choose(lcpd4)">Да, согласен, узнал. А ты меня узнал?</div>
        </div>
    </div>

    .....................

Не буду показывать все стили, в рамках вопроса смысла вроде нет.
Но вот те что будут нас интересовать -

.npc_question {
    position: relative;
    z-index: 1;
    margin-top: 17px;
    margin-bottom: 7px;
    padding: 28px 70px;
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.02em;
}

.npc_answers {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.npc_answer {
    cursor: pointer;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 23px 50px;
    width: 48%;
    margin: 10px 0;
    font-weight: bold;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0.02em;
}

Ещё всякие афтеры есть, бефоры - похуй.

Спойлер: Вот так он отображается

Акей.
Теперь идём в легендарную сборочку, которую мы купили за охулиард денег до того, как её слил какой-то пидарас - вместо своей параши, которую писали несколько лет, потому что изучать что-то новое всегда прикольно.

Делаем всё то же самое в нашем svelte - файлике.

{#if questData && questData.data}
<div class="npc">
    <div class="npc-content">
        <div class="npc_name">{getActors (questData.actorName).name}</div>
        <div class="npc_question">{titleData [titleData.length - 1]}</div>

            <div class="npc_answers">

                {#each questData.data.buttons as item, index}
                <div class="npc_answer {item.style}" class:active={questData.select === index} on:click={() => clickButton(item)}>
                    {item.name}
                </div>
                {/each}

            </div>
    
    </div>
</div>

Теперь у нас sass вместо css, по этому по хорошему соблюдаем всякую табуляцию, красивенько ниже стиля блока дописываем свои &:after и прочая
Точно блять так же, только чуть чуть отформатированее вроде должен выглядеть стиль

.npc_question
    position: relative
    z-index: 1
    margin-top: 17px
    margin-bottom: 7px
    padding: 28px 70px
    font-weight: bold
    font-size: 18px
    line-height: 22px
    letter-spacing: 0.02em

.npc_answers
    display: flex
    flex-wrap: wrap
    justify-content: space-between

.npc_answer
  cursor: pointer
  position: relative
  z-index: 1
  box-sizing: border-box
  padding: 23px 50px
  width: 48%
  margin: 10px 0
  font-weight: bold
  font-size: 16px
  line-height: 19px
  letter-spacing: 0.02em

&:after, &:before, &:hover:after - это я всё сознательно опустил.
Суть в том что технически файлы стилей исключая форматирование css\sass - абсолютно одинаковые.

А вопрос звучит так

Что это за хуйня

Спойлер: Это внешний блок content

Спойлер: При этом в старом варианте -

Никаких блоков выше, которые бы описывали правила расположения блока уровнем выше npc на странице - быть не должно, потому что в версии редейджа диалог с нпс вообще на всё ебало, даже на моём мониторе пизда широком он прижимается к краям.

Что я попробовал.
Поменять в индексном файле

    <meta name='viewport' content='width=device-width'>

на

<meta name='viewport' content='width=device-width, initial-scale=1.0'>

Это нихуя не дало

На минуту отвлечь чатжпт от разговоров со мной в порно-сеттинге и спросить в чём может быть дело - она посоветовала дописать

*, *::before, *::after {  box-sizing: border-box; }

Я убрал её блядские скобочки и кавычки, дописал - и это тоже нихуя не поменяло

Дальше с ней ебаться бесполезно, потому что чтобы получить вразумительный ответ - нужно задавать вразумительный вопрос, предполагая проблему.
А когда ты ебло, которое пытается верстать сразу под фреймворки - ну удачи конечно.

В тупую увеличить ширину всего блока

.npc-content
    width: 750px
    padding: 70px 170px
    padding-bottom: 30px
    margin: 0 auto

до 1250 - и да, это естественно сработало.

Я пробую это прямо пока пишу на самом деле, поэтому можно по идее всё это стереть и не создавать тему вообще, теперь, конечно.
Спасибо большое за помощь, парни.


Ладно
А объясните мне пожалуйста, почему так?
Шрифт, размер - не настолько сильно отличаются чтобы не влезать в блок
Ширина ну явно сильно разная
Почему в одном случае мне хватает 750 пикселей, а во втором - сильно нет? В чём разница?
Есть какие-то принципиальные отличия у сасса, где-то какой-то множитель пикселей на х.05 стоит, или чего?

 

[XDeveluxe]

Впервые за всю историю у людей появилась возможность отомстить тебе ответом на твой вопрос

 

[Inoi]

Впервые за всю историю у людей появилась возможность отомстить тебе ответом на твой вопрос

Не впервые, я уже пару раз что-то спрашивал
Раз в третий наверное

 

[Andrew Fares]

Многа букав, конечно, но если я правильно понял, то резюмирую: при вёрстке в редакторе - один вид(нормальный), при отображении в CEF рейджа - другой вид(не норма).

У меня сразу вопрос насчёт того, а какие вообще стили вычисляются в CEF remote debug? Посмотреть бы туда и вживую поредачить отображение в CEF.
Я далеко не профи в этом деле, но по моему представлению ситуации - как будто есть ещё стили, которые перекрывают стили этого интерфейса.

 

[Inoi]

Многа букав, конечно, но если я правильно понял, то резюмирую: при вёрстке в редакторе - один вид(нормальный), при отображении в CEF рейджа - другой вид(не норма).

У меня сразу вопрос насчёт того, а какие вообще стили вычисляются в CEF remote debug? Посмотреть бы туда и вживую поредачить отображение в CEF.
Я далеко не профи в этом деле, но по моему представлению ситуации - как будто есть ещё стили, которые перекрывают стили этого интерфейса.

А в живую в цефке рейджа первый вариант отображается нормально, ему хватает 750 пикселей, так же как и в браузере.
Ну вот точно так же как на скрине из браузера - он и выглядит в игре. Ноль разницы в плане того, как умещается контент.
А второй с такой же шириной - сильно меньше.

С тем что какие-то стили перекрывают этот блок в целом конечно мысль вразумительная вполне, справедливая. Возможно и правда стоит посмотреть в дебаггере.
Но тогда не очень понятно, почему если просто ебануть 1250 - блок растягивается нормально, ему уже ничего не мешает.
По логике если-бы какой-то другой стиль мешал - это бы нихуя не помогло.

У меня пока складывается какое-то ощущение что в первом варианте какое-то глобальное масштабирование меньше было.
Невероятно впадлу просто поднимать старую версию сервера, чтобы с линейкой сравнивать, но как будто бы в игре интерфейс глобально был меньше.

Многа букав, конечно

Извините, ето болезнь просто
Да и пока сам как можно подробнее объясняешь - начинаешь попутно понимать, что нужно сделать, обычно

 

[MADARAdev]

Было бы круче если бы ты все от дисплеев реализовывал. (Я бы сделал так).

Могу помочь если необходимо. MADARA#2022

 

[allready]

А в живую в цефке рейджа первый вариант отображается нормально, ему хватает 750 пикселей, так же как и в браузере.
Ну вот точно так же как на скрине из браузера - он и выглядит в игре. Ноль разницы в плане того, как умещается контент.
А второй с такой же шириной - сильно меньше.

С тем что какие-то стили перекрывают этот блок в целом конечно мысль вразумительная вполне, справедливая. Возможно и правда стоит посмотреть в дебаггере.
Но тогда не очень понятно, почему если просто ебануть 1250 - блок растягивается нормально, ему уже ничего не мешает.
По логике если-бы какой-то другой стиль мешал - это бы нихуя не помогло.

У меня пока складывается какое-то ощущение что в первом варианте какое-то глобальное масштабирование меньше было.
Невероятно впадлу просто поднимать старую версию сервера, чтобы с линейкой сравнивать, но как будто бы в игре интерфейс глобально был меньше.



Извините, ето болезнь просто
Да и пока сам как можно подробнее объясняешь - начинаешь попутно понимать, что нужно сделать, обычно

убираешь везде px и переделываешь под vh. ( можешь создать scss функцию и ее везде применять ). Тогда адаптировать никакое разрешение не придется

 

[allready]

убираешь везде px и переделываешь под vh. ( можешь создать scss функцию и ее везде применять ). Тогда адаптировать никакое разрешение не придется

Вот тебе и вычисление vh:
@function get-vh($object) {
$vh: (1080 / 100) * 1px;
@return ($object / $vh) * 1vh;
}

Использование:
<style lang="scss">
@import './get-vh.scss';
.class {
width: get-vh(200px);
font-size: get-vh(30px);
}

 

[MADARAdev]

Вот тебе и вычисление vh:
@function get-vh($object) {
$vh: (1080 / 100) * 1px;
@return ($object / $vh) * 1vh;
}

Использование:
<style lang="scss">
@import './get-vh.scss';
.class {
width: get-vh(200px);
font-size: get-vh(30px);
}

Хороший вариант.