Блог

Главная - Вопросы по программированию - КАК игнорировать размер окна браузера?

КАК игнорировать размер окна браузера?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я хочу, чтобы объекты на сайте не перемещались при изменении размера браузера.

Как я могу решить эту проблему?

Вот код одного объекта, который перемещается

 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;
}

введите описание изображения здесь

введите описание изображения здесь

Комментарии:

1. Вы употребляете display:flex; ? Где твой код?

2. Я использую position: fixed;

3. Я отредактировал описание, взгляните

4. developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

Ответ №1:

 #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

Ответ №2:

Насколько мне известно, используя «%» в качестве единицы измерения, вы указываете объекту позиционировать себя относительно элемента, в котором он находится. Если этот элемент является <body> , то ваш элемент будет позиционироваться относительно размера тела, что приводит к его изменению в зависимости от размера экрана. Вероятно, вы могли бы исправить это, окружив свои элементы в a <div> с предварительно установленным width значением и height в пикселях. Дайте мне знать, если это решит проблему!