首页 > 解决方案 > 如何忽略浏览器窗口的大小?

问题描述

我希望网站上的对象在浏览器大小发生变化时不会移出。

我怎么解决这个问题?

这是一个正在移出的对象的代码

div[class=ygol4] {
    border-radius: 200px;
    border: 3px solid #ffffff;

    width: 15px;
    height: 15px;
    background: #151515;
    position: fixed;
    top: 86.3%;
    left: 36%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

在此处输入图像描述

在此处输入图像描述

标签: javascripthtmlcss

解决方案


#container{
  width:960px;
   margin:0px auto;
 }  
#container img{
 width:960px;
 }
 #left-column{
   width:700px;
    float:left;
      background:lightblue;
     }
     #right-column{
      width:260px;
       float:left;
       background:gold;
        }
      @media screen and (max-width:959px){
      #container{
        width:100%;
          }
   #container img{
    width:100%;
     }
     #left-column{
       width:70%;
    }
     #right-column{
       width:30%;
        }
       }
      @media screen and (max-width:640px){
      #left-column{
       width:100%;
        } 
         #right-column{
          width:100%;
          }
        @media screen and (max-width:320px){
            #container{
             width:320px;
                }
              }

           <div id="container">
           <img 
       src="https://unsplash.com/photos/osPrIcTwJy4"/>
                     <section id="left-column">
                   this is the left column 
                    </section>
                    <aside id="right-column">
                        this is the right column
                         </aside>
                           </div>

这是我经历过的最烦人的搜索之一,但尝试遵循这种格式,它帮助了我并节省了我很多时间。要了解该方法的概念,请查看此 YouTube 视频https://youtu.be/fA1NW-T1QXc


推荐阅读