css3移动端 四列 |样式显示隐藏css

CSS3提供了很多新的布局属性，比如flexbox、grid等，可以让大家更方便的实现多列布局。

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
}
.item {
background-color: #ccc;
height: 100px;
}

上述代码实现了一个四列布局，其中.container为父容器，通过display: grid可以将其设为网格布局，然后通过grid-template-columns属性实现每个网格的宽度，1fr表示等分。通过grid-gap属性可以设置网格之间的间距。

<div class="container"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>

在HTML中，只需要将要展示的元素放在父容器内即可。

移动端的网页布局需要考虑屏幕的大小和分辨率，适配不同的设备，因此大家还需要媒体查询来针对不同设备设置布局。

@media screen and (max-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}

在上述代码中，当屏幕宽度小于768px时，通过媒体查询重新设置.container的布局，实现两列布局。

利用CSS3的布局属性和媒体查询，移动端页面布局变得更加简单和灵活，有助于提高用户体验。