如题,后端程序员业余客串前端,已经苦恼于 css 好几年了,想问一下有没有好用的排版框架,支持响应式,不会污染子 div 内容,另外还需要适配 vue 无坑的。
我的需求基本是如下这样:
工作中经常遇到一些常见排版,比如我需要介绍一个产品,那么经常来说是我需要两个 div,一个放图片,一个放文字介绍。
在用户是横屏状态下(比如页面宽度大于 1024 时),我希望这两个 div 水平平均分布,即分别占据屏幕的左右各 50%。比如文字放在左边,图片放在右边。文字需要根据宽度自动换行这个不提了,图片的话,我希望它能在几个断点下显示不同宽度(比如页面宽度大于 2048,那图片宽度就定位 750,如果大于 1280,那就定为 600,如果大于 1024,就定位 500 )诸如这类断点写法,不同的图片大小可以保证比如页面过大的时候图不至于太小,而页面缩小了,图也不至于被挤出屏幕(我目前只会写死大小,或者完全让图片大小随 div 大小持续变化,效果都不好)
然后进一步地,我希望当宽度小于 1024 时(假设这时候是竖屏),那么就把刚才的两个 div 改成垂直放置,一上一下。同时由于每个 div 独占一行,那么这时候图片的大小应该完全随页面宽度的变化持续变化,不用担心会跟其他内容产生冲突。
=================
以上是一个常见需求,我自己试了一些 css 框架,感觉都不是很好用,最大的问题是文档非常少,大部分即使能完成 div 级别的响应式排版,具体到我上文说的图片大小打断点时就又不知道怎么做了。
求推荐个解决方案,谢谢各位
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.