如何使我的网站移动友好 - 似乎无法通过@media 查询修复

Question

我试过像往常一样使用媒体查询，但我不知道我做错了什么。这是它在桌面上的样子： [桌面]：https://i.stack.imgur.com/rIQbK.png 这是它在手机上的样子： [手机]: https://i.stack.imgur.com/Y0JLP.jpg . 当我注释掉 .css 文件时，边距消失了。我真的不知道在这里使用哪些@media 查询。我希望它与桌面相同。尝试更改位置并手动调整边距。但没有什么效果很好，首先 post 在这里。在网上找了一整天都没有找到答案，希望能帮到你！先感谢您.. （它在视频之上）

// function([string1, string2],target id,[color1,color2])    
consoleText(['נשבר לכם המסך?', 'הטלפון נפל למים?', 'הטלפון אינו נטען?'], 'text', ['white', 'red', 'black']);

function consoleText(words, id, colors) {
    if (colors === undefined) colors = ['#fff'];
    var visible = true;
    var con = document.getElementById('console');
    var letterCount = 1;
    var x = 1;
    var waiting = false;
    var target = document.getElementById(id)
    target.setAttribute('style', 'color:' + colors[0])
    window.setInterval(function () {

        if (letterCount === 0 && waiting === false) {
            waiting = true;
            target.innerHTML = words[0].substring(0, letterCount)
            window.setTimeout(function () {
                var usedColor = colors.shift();
                colors.push(usedColor);
                var usedWord = words.shift();
                words.push(usedWord);
                x = 1;
                target.setAttribute('style', 'color:' + colors[0])
                letterCount += x;
                waiting = false;
            }, 1000)
        } else if (letterCount === words[0].length + 1 && waiting === false) {
            waiting = true;
            window.setTimeout(function () {
                x = -1;
                letterCount += x;
                waiting = false;
            }, 1000)
        } else if (waiting === false) {
            target.innerHTML = words[0].substring(0, letterCount)
            letterCount += x;
        }
    }, 120)
    window.setInterval(function () {
        if (visible === true) {
            con.className = 'console-underscore hidden'
            visible = false;

        } else {
            con.className = 'console-underscore'

            visible = true;
        }
    }, 400)
}

#myVideo {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  #myVideo video {
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 0;
  }
  .console-container {
   font-size:4em;
    text-align:center;
    height:200px;
    width:600px;
     display:block;
     position:absolute;
    color:white;
     top:0;
      bottom:0;
      left:0;
      right:0;
      margin:auto;
      text-shadow: 
      2px 2px #ffffff,
      4px 4px #000000;
   }

    <section class="banner embed-responsive-item">
        <video autoplay muted loop id="myVideo">
            <source src="https://mobilefixexperts.com/wp-content/uploads/2018/01/mobile-repair-experts-video.mp4"
                type="video/mp4">
        </video>
        <div style='direction: rtl;' class='console-container float-end'><span id='text'></span>
            <div class='console-underscore' id='console'>&#95;</div>
        </div>
        <a id="a" class="btn btn-primary btn-lg float-end" href="#" role="button">צור קשר</a>
        <!-- <h2 class="float-end display-1" style='direction: rtl;'>מה תרצו לתקן היום?</h2>
        <a id="a" class="btn btn-primary btn-lg float-end" href="#" role="button">צור קשר</a> -->
    </section>

css代码是：

.console-container {
   font-size:4em;
    text-align:center;
    height:200px;
    width:600px;
     display:block;
     position:absolute;
    color:white;
     top:0;
      bottom:0;
      left:0;
      right:0;
      margin:auto;
      text-shadow: 
      2px 2px #ffffff,
      4px 4px #000000;
   }

Answer 1

如果我理解您要删除 mobile/small 屏幕上的边距的问题？

这个css会做到： @media screen and (max-width:500px) { body{margin:0;} }

Answer 2

将 position: relative; 添加到您的横幅 class 然后您就可以使用您想要的媒体查询了。

.banner{
     position: relative;
   }

Answer 3

这也是我遇到的常见问题。这样做的原因是大文本，当大文本触及屏幕右侧时，您可能会看到网站开始混乱。因此，解决此问题的解决方案是使该文本具有响应性，这意味着它不应触及应变小的一侧，因此您可以这样做：

@media screen and (max-width: 425px) { //Note where it starts happening
   #text {
         font-size: 3em; //small than what it was before
   }
}

如何使我的网站移动友好 - 似乎无法通过@media 查询修复

How to make my website mobile friendly - cant seem to fix with @media queries

html

javascript

css

mobile