Question

我正在尝试为我的网站实施和新布局。我有能力使用JS实现这个，但我正在尝试使用纯CSS。

例如http://tympanus.net/Development/GridLoadingEffects/

它以3列开始，当您将页面调整为较小时，框会调整大小，直到它变小到变成两列。

类似于我试图让我的方形图像的水平列表占据页面的整个宽度，正方形的最大宽度为300px。例如：页面以5列开始，页面宽度开始缩小，框的宽度也开始缩小。它达到了一个4 300px的盒子能够适应当前宽度的点。

我已经和最大宽度和最小宽度搞好了，但我是一个CSS新手，我觉得我错过了什么。我环顾四周，

有什么想法吗？

Answer 1

您可以使用媒体查询为不同的浏览器宽度设置不同的css规则。

@media (min-width: 300px) and (max-width: 600px) {
    someClass {
      /* some rules for browser width between 300 and 600px */
    }
}

有关媒体查询的更多信息：

Answer 2

尝试将宽度设置为百分比，使其相对于屏幕宽度。

然后使用屏幕宽度media query为不同的屏幕尺寸设置不同的宽度。

祝你好运。

Answer 3

您基本上谈论的是响应式网格布局系统。恕我直言，如果你漂浮你的DIV并使用固定的％大小，这是在纯CSS中这样做的最简单的方法。对要支持的每个屏幕尺寸范围使用媒体断点。您还需要计算所有间隙（沟槽宽度）。还要注意某些浏览器中的舍入错误，尤其是IE。您可能需要使用略低于100％的数学，因为您希望确保不会超过100％的1px。

这是一个示例，只有一个断点，默认使用3列布局，当显示大小低于480px时，反转为2列布局。

<style>
/* default */
.square {
    background-color: orange;
    width: 30%; /* 100/3 - (margin*2) */
    padding-bottom: 30%; /* matching width makes it square */
    margin: 1.5%; /* margin calculated as portion of overall 100% */
}
@media (max-width: 480px) {
    .square{
         /* overrides for smaller screens */
         background-color: purple; /* show the breakpoint switch below 480px */
         width: 47%; /* (100%/2) - (margin*2) */
         padding-bottom: 47%;
         margin: 
    }
}
</style>

<div>This layout will fit 3 squares wide for any screen width</div>

<div class="square">one</div>
<div class="square">two</div>
<div class="square">three</div>

这是fiddle。

您的媒体查询可能会变得更复杂，但几乎可以支持任何设备。首先尝试并设计任何屏幕尺寸，然后擦除边缘情况。

这很快就会在CSS中进行管理变得非常复杂。您真的想要考虑一个CSS预处理器，例如SASS或LESS。但是，有很多网格框架可以支持这一点，包括Twitter的bootstrap和来自fluid squares的一些很好的灵感，或者我最喜欢的简单responsive.gs。您会发现其中大多数使用12或24列的网格，因为它们分成更多偶数列。例如，24可缩小到由1,2,3,4,6,8,12和24列组成的屏幕。

CSS中的全宽列表

3 个答案:

这是fiddle。