scss 更好的响应式列表布局

Posted 2021-05-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了scss 更好的响应式列表布局相关的知识，希望对你有一定的参考价值。

@media screen and (max-width: 768px){
	.listing .listedPost:not(.listedFundraiser){
		width: calc(50% - (#{$gutter-width} / 2));
		float: none;
		padding: 0;
		margin-bottom: $gutter-width;

		&:nth-of-type(3n+3) {
			margin-right: $gutter-width;
		}

		&:nth-of-type(2n+2) {
			margin-right: 0;
		}
	}

	.content.listContent.mapResultList .listingBanner {
		float: none;
		width: 100%;
		margin: 0 0 20px 0;
	}
}

@media screen and (max-width: 540px) {
	.listing .listedPost:not(.listedFundraiser) {
		width: 100%;
		margin-right: 0;

		&:nth-of-type(2n),
		&:nth-of-type(3n) {
			margin-right: 0;
		}

		// .listed-post-image-link {
		// 	flex-shrink: 1;
		// }
	}
}

以上是关于scss 更好的响应式列表布局的主要内容，如果未能解决你的问题，请参考以下文章