根据浏览器宽度通过平滑过渡更改网格中的列数
我在一个简单的HTML和CSS网格中遇到了一个小问题。我有一个由n个盒子组成的网格。它可以有任意数量的列，具体取决于浏览器或其父宽度。
将display应用于内联块非常简单，如下所示：
ul {
list-style: none;
}
ul li {
width: 100px;
height: 100px;
display: inline-block;
background: #f00;
}请参阅http://jsfiddle.net/2nscQ/
但是当有人改变浏览器的宽度时，我希望在平滑过渡中改变列数。使用CSS可以做到这一点吗？或者有没有好的jQuery插件或者小窍门？
示例：http://www.squarespace.com/templates/
我正在寻找一个非常简单和小的解决方案。因为我不能为这个小东西添加一个完整的库。我已经在我的应用程序中使用了jQuery。所以如果可以使用CSS和jQuery的话。那就太好了。
回答 2
Stack Overflow用户
发布于 2012-11-05 19:44:27
可以，您可以更改当前浏览器的动态页面。我决定你可以通过在jQuery中使用$(window).width()来检查浏览器的宽度，并且你可以使用像resize()这样的事件处理程序来附加浏览器宽度，当当前的浏览器宽度被用户改变时……还有一件事:当我们在CSS中做的时候，大多数开发人员动态地将网站的宽度设置为100%。
//这是我添加的CSS Media查询示例：-
CSS媒体查询可以通过您能够定义的所有方式添加到CSS中：
第一个示例：当当前页面宽度不高于或低于480px时，您可以链接特定的：
我建议您使用第一个示例。我们知道我们可以覆盖CSS网格，当浏览器调整大小时，你可以设置你想要的时间，使用不同的文件名，你可以制作更多的.css文件和链接，如下所示。
<link rel="stylesheet" type="text/css" href="smallscreen.css" media="only screen and (max-width: 480px)" />第二个示例:在<style>元素中使用导入的样式表：
@import "smallscreen.css" only screen and (max-width: 480px);第三个示例:将<style>元素中的作为媒体规则：
<style type="text/css">
@media only screen and (max-width: 480px){
/* rules defined inside here are only applied to browsers that support CSS media queries and the browser window is 480px or smaller */
}
</style>...然后，当你使用特定的浏览器时，你可以使用：
谷歌浏览器的：
@media screen and (-webkit-animation) {
div.grid_24 {
// Webkit only rules 4
}
}火狐：
@media screen and (max-width:320px;) {
div.grid_24 {
//..
}
}...歌剧：
@media all (-o-min-device-pixel-ratio:0) {
div.grid_24{
//..
} // as i know maybe for opera 10 and above或者您可以使用全部：
@media all and (max-width:480px) {
div.grid_24 {
//..
}
}就这样。如果你想了解更多关于媒体查询的参考资料，你可以查看w3、htmlGoodies或css-trick
Stack Overflow用户
发布于 2012-11-06 21:35:43
当然，只需使用CSS3's column-width属性设置列的宽度(假设它将以em而不是px为单位)，并将所有li项放入一个设置了列宽的容器中？
当我调整浏览器窗口的大小时，w3schools示例平滑地更改了列计数。
https://stackoverflow.com/questions/13231013
复制相似问题
腾讯云开发者
