Question

我正在尝试使用Justin Tadlock的Grid Columns插件设计移动版。资料来源：https://github.com/justintadlock/grid-columns

在我的css文件中，我想将移动版.column-grid .column width设置为完整，并重置min-width: 768px的宽度

.column-grid .column {
    float: left;
    margin-right: 5%;
    margin-left: 0;

    }

@media only screen and (min-width: 768px) {
.column-grid .column {

    }
}

我尝试width: 100%与width: auto，display: block与display: inline。然而，它并没有成功。

注意，实际的列宽是在.column-grid .column包装器中设置的。

有关如何巧妙地做到这一点的任何建议吗？

Answer 1

如果您尝试在移动设备上垂直堆叠列并将其显示为桌面上的列，请更改媒体查询：

@media only screen and (max-width: 768px) {
.column-grid .column {
 width: 100%;
 }
}

否则我需要在上下文中看到你的标记。

Answer 2

我刚刚将插件CSS导入到样式表中，位于

@media (min-width: 48em) {（768px）。

然后我取消注册插件排队的样式表，因为不需要两次提供相同的内容：

function remove_grid_columns() {
    wp_dequeue_style( 'grid-columns' );
}
add_action( 'wp_print_styles', 'remove_grid_columns' );

（少了1个HTTP请求，是的！）我认为这是最好的方法，唯一的办法就是在网格列更新时记住更新我的样式表。但是当我使用SASS时，如果插件得到更新，我只需将更新的columns.css放入我的grid_columns.scss文件中。

在移动第一个样式表中重置宽度div-element

2 个答案: