css - 现代图片库：流动的还是有弹性的？

Question

我对 UX 和 IA 以及有关界面和解决方案设计的一切都是新手。我需要做一个基于网格的简单图片库。我读到了响应式设计和媒体查询。

好的，在宽屏中我有 7 列网格，在笔记本电脑中有 5 列，在平板电脑 3 和 smarthpone 1 中。这很酷。我已经通过流体布局完成了这项工作，使用百分比作为宽度属性。我喜欢这个解决方案，因为它对所有视口大小都很灵活。

但是如果用户使用“command +”或“command -”键改变字体大小呢？如果图像宽度是百分比，则容器大小不会改变，图像也不会改变。结果有点奇怪：一切都变小了，但图像没有改变（好吧，边距发生了变化，那就更奇怪了）。

但是，如果我使用 em 作为宽度，我将获得一个不再流畅的布局。

如何混合两种布局？

score 1 · Accepted Answer

我个人喜欢设置 2 个单独的 CSS 样式表。一个用于主站点（桌面版），另一个用于移动设备。

所以在一个名为 responsive.css 的样式表中，你可以有这样的东西：

 @media only screen and (min-width: 768px) and (max-width: 1024px)
 {
   /*stuff in here*/
 }

您可以根据需要调整宽度或在必要时添加更多宽度。

我个人不喜欢响应式设计，喜欢更流畅的设计。有这么多不同尺寸的移动设备，使用流畅的设计可能会更好地完成您想要实现的目标。

至于字体大小，请尝试始终使用 em，因为它会更准确地重新调整大小。

1 回答 1