问题[адаптивная-верстка]

我是编程新手，亲爱的朋友，我会原谅你的帮助。

我的问题的症结所在：

JS代码在移动版中不起作用，当你点击“服务器列表”按钮时，浏览器严重bug，一段时间后弹出一条消息（Chrome没有响应。强制关闭？）

在 PC - 移动/PC 版上，代码有效

我还注意到如果我禁用负责翻译页面的js文件，那么“服务器列表”按钮就会起作用。请告诉我如何解决这个问题？

let serverOptions = document.getElementById('select_')

function myFunction() {

    let x = document.getElementById("myNumber").value;

    serverOptions.addEventListener("change", function server() {
            if (serverOptions.value === '1') {
                let a = x * 0.14;
                let b = Math.round(a * 100) / 100;
                document.getElementById("priceForAde1na").value = b
                return b
            } else if (serverOptions.value === '2') {
                let a = x * 0.23;
                let b = Math.round(a * 100) / 100;
                document.getElementById("priceForAde1na").value = b
                return b
            } else if (serverOptions.value === '3') {
                let a = x * 1.15;
                let b = Math.round(a * 100) / 100;
                document.getElementById("priceForAde1na").value = b
                return b
            } else if (serverOptions.value === '4') {
                let a = x * 0.0046;
                let b = Math.round(a * 100) / 100;
                document.getElementById("priceForAde1na").value = b
                return b
            }
        })
}

myFunction()

const langArr = {
    "unit" : {
        "ru": "Купи адену на любимом сервере Lineage2",
        "eng": "Buy adena on beloved server Lineage2",
    },
    "text_hello" : {
        "ru": "Список Серверов",
        "eng": "SERVER LIST",
    },
    "text_hello1": {
        "ru": "Способ оплаты",
        "eng": "Payment method",
    },
    "text_hello2": {
        "ru": "Купить сейчас",
        "eng": "Buy Now",
    },
    "text_hello3": {
        "ru": "Валюта",
        "eng": "Currency",
    },
    "text_menu1": {
        "ru": "Главная",
        "eng": "Home",
    },
    "text_menu3": {
        "ru": "Вопросы",
        "eng": "Questions",
    },
    "text_menu4": {
        "ru": "Контакты",
        "eng": "Contacts",
    },
    "text_menu5": {
        "ru": "Поставщикам",
        "eng": "Deliver",
    },
    "deal": {
        "ru": "Гарантии",
        "eng": "Warranty",
    },
    "nik_name": {
        "ru": "Ник вашего персонажа:",
        "eng": "Name character:",
    },
    "email": {
        "ru": "Ваша электронная почта:",
        "eng": "Your email:",
    },
    "adena": {
        "ru": "Получу:",
        "eng": "You will get:",
    },
    "oplata": {
        "ru": "Заплачу: kk",
        "eng": "You pay: for kk",
    },
}
const select = document.querySelector('.change-lang');
const alllang = ['eng', 'ru'];

select.addEventListener('change', changeURLLanguge);

window.addEventListener("load", function bbb (event){
    select.value = localStorage.getItem("langers");
});


function changeURLLanguge() {
    let seo = select.value;
    location.href = window.location.pathname +"#"+ seo;
}

function changeLanguage(){
    let hash = window.location.hash;
    hash = hash.substr(1)
    if (!alllang.includes(hash)){
        location.href = window.location.pathname + "#" + select.value;
        return;
    }
    select.value = hash;

    localStorage.setItem("langers",hash)

    document.querySelector('title').innerHTML = langArr["unit"][hash];
    document.querySelector('.server__list_button').innerHTML = langArr["text_hello"][hash];
    document.querySelector(".donat__list_button").innerHTML = langArr["text_hello1"][hash];
    document.querySelector(".text_hello2").innerHTML = langArr["text_hello2"][hash];
    document.querySelector(".Currency").innerHTML = langArr["text_hello3"][hash];
    document.querySelector('.nikname').placeholder = langArr["nik_name"][hash]
    document.querySelector('.email').placeholder = langArr["email"][hash]
    document.querySelector('.adena').placeholder = langArr["adena"][hash]
    document.querySelector('.oplata').placeholder = langArr["oplata"][hash]
    document.querySelector(".menu_1").innerHTML = langArr["text_menu1"][hash];
    document.querySelector(".menu_3").innerHTML = langArr["text_menu3"][hash];
    document.querySelector(".menu_4").innerHTML = langArr["text_menu4"][hash];
    document.querySelector(".menu_5").innerHTML = langArr["text_menu5"][hash];
    document.querySelector(".deal").innerHTML = langArr["deal"][hash];

    }
setInterval(() => {
    changeLanguage()
},10)

https://create-aaa.github.io/dava/#ru

我编写了以下自适应属性的混合：

@import "./settings.scss";

@mixin adaptiveProperty($property, $startValue, $secondValue, $mode) {
    $addValue: $startValue-$secondValue;

    @if ($mode == 1) {
        @media (max-width: #{$maxWidthContainer+px}) {
            #{$property}: calc(
                #{$startValue+px}+$addValue * (100vw-#{$minWidth+px}) / (#{$maxWidthContainer+px}-#{$minWidth+px})
            );
        }
    } @else if ($mode == 2) {
        @media (min-width: #{$maxWidthContainer+px}) {
            #{$property}: calc(
                #{$startValue+px}+$addValue * (100vw-#{$minWidth+px}) / (#{$maxWidthContainer+px}-#{$minWidth+px})
            );
        }
    } @else {
        #{$property}: calc(#{$startValue+px}+(#{$addValue}* ((100vw-#{$minWidth+px}) / #{$maxWidth-$minWidth})));
    }
}

该文件包含settings.scss以下设置：

$font-family: "Roboto";
$fontSize: 16;
$maxWidthContainer: 1000;
$maxWidth: 1920;
$minWidth: 320;

现在当像这样调用 mixin 时：

.test_header{
    @include adaptiveProperty("font-size", 30, 16, 0) // Шрифт должен быть 30px на экране шириной 1920px и уменьшаться до 16px на 320px 
}

但是在编译的 css 文件中，我得到了这样的属性：

.test_header {
  font-size: calc(
            30px+calc(30px-16px)px* (100vw-320px) / (1920px-320px)
        );
}

括号后面是calc(30px - 16 px)多余px的，而且似乎是一个额外的换行符。我认为这就是为什么我的 mixin 不起作用的原因。如何修复公式以px从最终结果中删除这些不必要的？

有一个带有整个块背景图像的外部块，内部是一个带有内容的块 

2个问题 

如何根据需要移动带有内容的块 - 出于某种原因，一切都随着背景而变化

以及如何使其余的竹叶可见

网站 http://frontend-er.h1n.ru/asia-spa/

在布局的移动适应方面面临这样的问题。当我在 chrome 中进入开发人员模式并选择页面显示的移动版本时，布局超出了指定的最大尺寸。截图示例：

但是在我开始选择几次不同版本的手机后，一切都变得正常并开始在所有版本的手机上正确显示。请帮帮我！

大家好，我正在阅读有关自适应布局的内容，并且遇到了用于包装网站的代码，例如 div.wrapper {max-width: 1200px; 宽度：100%}。思路很明确：块的宽度不应该超过 1200px，但是可以缩小。但是，如果块级元素本身跨越了父元素的整个宽度，那么拥有 100% 的宽度有什么意义呢？