Question

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

我一直试图用id =＆＃34;修复＆＃34;响应，除了背景图像之外，它不会显示任何内容。

如果分辨率允许，我希望div以256px开始。

有什么想法吗？（Maby我将不得不在这个上使用javascript？）

Answer 1

您在代码中使用了两次最小高度/宽度。首先你需要检查屏幕是否超过256px，这可以通过这种方式在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;
    }
}

Answer 2

你可以得到这样的解决方案是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
 }

显然，你会将2000px更改为其他内容。但是使用它你可以找到屏幕分辨率并使用javascript更改div布局。

但如果你不愿意使用javascript，你应该使用CSS媒体查询

响应式布局，拉伸div，无内容到最大宽度

2 个答案: