CSS和屏幕分辨率的问题

Question

我正在创建一个网站，希望得到一些更有经验的网络开发人员的意见。

如何创建一个网站，其中元素样式属性（填充，边距，高度，宽度等）适合用户的屏幕分辨率？

使用CSS我可以选择一个值，这是将为所有用户显示的最终值，无论他们的浏览分辨率如何。

例如，假设我想要在其容器左侧显示10％的图像，我会执行以下操作：padding-left: 15%;现在，这可能适用于某些分辨率，但对于其他人我可能需要价值要高一些。

更有经验的网络开发人员在屏幕分辨率差异方面做了些什么？

Answer 1

听起来你的目标是让你的布局在任何分辨率下看起来都是一样的，这实际上并不实用。请记住，图像缩放得很差！大多数设计师所做的是尽可能使用百分比来使布局“流动”以适应大多数分辨率，同时保持吸引力。

如果您分析（例如）Stack Overflow。你会看到它是一个固定宽度的集合，它本身就在浏览器中。 Apple也做同样的事情，一些艺术元素在任何窗口宽度都能优雅地显示出来。这是一个艺术问题，我不确定答案是否会更清晰。

Answer 2

这完全取决于您的设计目标。

大多数设计师使用固定宽度区域并让它以屏幕为中心。

在某些情况下，您可以使用CSS媒体查询将特定规则应用于不同类型和大小的屏幕（浏览器支持有限）。

您可以使用min / max-width来处理许多内容过大或过小的情况 - 但是没有相应的边距。

SVG图形可用于提供在任何分辨率下都很好的可伸缩图像。

有些公司为移动用户提供了一个完全独立的网站。

还有其他一些技巧和窍门，但一般来说大多数设计师都会使用固定宽度的布局来避免这些问题 - 即使这并不总是理想的。

Answer 3

我通常用em单位定义那些相对于字体大小的样式。因此，增加文本大小会增加padding＆amp;利润率成比例。