Question

我试图拥有8个项目的网格，当浏览器的宽度变小时，我希望div变得更小，当浏览器增加时我希望div变得更大但只是为了一定的规模。

请在此处找到我的演示：http://jsfiddle.net/4qnzdhpz/

您会注意到，当浏览器宽度较小时，框重叠，这就是为什么我想让它们变小，目前它们是70px，我认为最好的方法是使用百分比，但我只希望它们达到一定的大小，所以我猜测我需要使用最大宽度和可能的最小宽度。

这里是我用于div盒子的css的片段，其余的css都在小提琴中。

.box {
width:70px;
height:70px;
background:green;
border: 2px solid black;
border-radius: 10px;
position: relative;
display: block;
top: 10%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(-23deg) ;
   -moz-transform: translate(-50%, -50%) rotate(-23deg) ;
     -ms-transform: translate(-50%, -50%) rotate(-23deg) ;
        -o-transform: translate(-50%, -50%) rotate(-23deg) ;
              transform: translate(-50%, -50%) rotate(-23deg) ;
}

Answer 1

如果您希望框大小为“响应”，则必须使用width: xx%。要设置最小或最大宽度，请使用max-width: Xpx和min-width: Xpx

我已经相应地更新了你的小提琴。

http://jsfiddle.net/vekrhxu8/

Answer 2

如果您只想在浏览器的宽度低于X px时更改宽度，可以使用

.box {
    //your div's style
}

@media (max-width: X px){
    .box{
        //write here the new div's  % width and the max-width 

    }

}

根据宽度尺寸使div变小和变大

2 个答案: