移动端常见布局方案

场景一:自动切分子页
移动端常见布局方案
文章图片

实现上面布局:根据容器大小自动装填对话。当一段对话过大时,缩小字号以适应容器大小。
场景二:文字区域大小自适应
移动端常见布局方案
文章图片

实现上图布局:容积大小一定,当内容可以被正常放置的时候正常处理,当内容超出容器的时候缩小字号填满容器。
场景三:每排三个卡片适应
移动端常见布局方案
文章图片

实现上图的布局:3个一排,小于3个从左往右依次排列。
场景四:内容左,整体居中
移动端常见布局方案
文章图片

实现上面的布局: 在长度长短不一的段落中要保持所有段落的内容居左显示,段落外的一层容器在页面中间显示。
【移动端常见布局方案】参考资料:

  • https://zhuanlan.zhihu.com/p/...

    推荐阅读