Блог

#css #twitter-bootstrap #bootstrap-4 #responsive-design #responsive

#css #twitter-bootstrap #bootstrap-4 #адаптивный дизайн #отзывчивый

Вопрос:

  @media (max-width: 4000px){
    #map {
      width: 100%;
      
    }

    .overlay {
    position: absolute;
   left: 0;
   background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
   opacity: 0.9;
    z-index: 1000;
    height: 700px;
 
    bottom: 0;
  }
  .overlay2 {
    position: absolute;
  width: 1500px;
  height: 2000px;
  top: 0;
/*margin-top: 57px;*/
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
  opacity: 0.6;
  overflow: auto;
  }
  

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

1. На самом деле, если выше 4000 пикселей вы имели в виду больше 4000 пикселей, замените (max-width: 4000px) на (min-width: 4000px) , как написал @Nikhil.

2. Спасибо, но как написать это, используя соотношение сторон или разрешение

3. Вы можете использовать относительные размеры : rem, %, vw или vh, например, вместо определения фиксированных размеров с помощью px . Я не уверен, что хорошо понял ваш вопрос.

4. Спасибо @Devart . Но он не работает должным образом, не могли бы вы помочь мне написать адаптивный код с помощью bootstrap и отредактировать приведенный выше код с помощью bootstrap. Почему, потому что я использовал дизайн кода начальной загрузки для вышеупомянутых классов наложения.

Ответ №1:

 @media only screen and (min-width: 4000px){
    #id {

      desired css
      
    }
}
  

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

1. Не могли бы вы отредактировать код, используя загрузочный адаптивный код.