移动端(手机端)三列布局

各位大佬好,我想问一下你们一般是怎么处理自适应三列布局的(如图),每个手机宽度不一样,
1: 你们是把每个列的宽度写死,然后每列之间的间距自适应?

2: 还是把间距写死,让列宽自适应?

还有就是自适应之后每个div块的高度怎么设置?变形怎么处理?

谢谢!

三列布局.PNG

阅读 384
评论
    2 个回答

    “1: 你们是把每个列的宽度写死,然后每列之间的间距自适应? 2: 还是把间距写死,让列宽自适应?”
    这也是要看你内容滴。这两个并不冲突,可以一起使用。比如:
    在0 ~ 500px,采用宽度自适应,间距写死;500 ~ 900,采用间距自适应,宽度写死;900以上,一列三个变四个或者更多,宽度写死...

    自适应是一个比较灵活的东西,怎么好看怎么来,配合着内容来,不是固定写法。
    变形的话,一个是文字内容,文字可以居中处理或者统一左对齐也行,另一个是图片,图片也是一样可以居中处理,一个原则就是不能让图片发生形变(拉伸变形)。

    高度处理的,一种是宽高用rem单位,一起放大缩小;如果用px的话,就最好维持它原先高度好了。处理自适应主要是一个宽度问题,不同手机高度不同可以不管,毕竟都是能滚动屏幕的。

      撰写回答

      登录后参与交流、获取后续更新提醒