Блог

 <div style="max-width:768px;height:auto;margin:auto;position:relative;">
 <div id="fix" style="background-repeat:no-repeat;background-size:cover;background-image:url('../facebook.png');min-width:100%;min-height:100%;max-width:256px;max-height:256px;"></div>
</div>
  

Я пытался сделать div с id =»fix» отзывчивым, у него не будет никакого содержимого для отображения, кроме фонового изображения.

Я хочу, чтобы div начинался с 256 пикселей, если это позволяет разрешение.

Есть идеи? (Может быть, мне придется использовать javascript для этого?)

Вы используете минимальную высоту / ширину два раза в своем коде. Прежде всего, вам нужно убедиться, что размер экрана превышает 256 пикселей, это можно сделать таким образом в вашем CSS:

 @media screen and (min-width: 256px, min-height: 256px){
    #id {
        min-width: 256px;
        min-height: 256px;
    }
}
  

И если эти правила не могут быть сопоставлены, у вас есть стандартные настройки вне запроса. Вот так:

 #id { width: 100%; height: 100%; }    

@media screen and (min-width: 256px, min-height: 256px){
    #id {
        min-width: 256px;
        min-height: 256px;
    }
}
  

вы можете получить разрешение, подобное этому javascript…

  screen.availHeight //for height
 screen.availwidth  //for width
  

попробуйте использовать условный оператор, подобный этому…..

  var x = screen.availwidth
 if (x> 2000px) {
 code here to run if resolution is not greater thank 2000px
 } else {
 code here to run if resolution is not greater than 2000px
 }
  

очевидно, вы бы изменили 2000 пикселей на что-то другое. Но с помощью этого вы можете найти разрешение экрана и изменить макет div с помощью javascript.

Но если вы не хотите использовать javascript, вам следует использовать медиа-запросы CSS