CSS 和屏幕分辨率问题
我正在创建一个网站，想征求一些经验丰富的网络开发人员的意见。
如何创建一个元素样式属性（填充、边距、高度、宽度等）适合用户屏幕分辨率的网站？
使用 CSS，我可以选择一个值，这就是将为所有用户显示的最终值，无论他们的浏览分辨率如何。
例如，假设我希望将图像显示在其容器左侧 10% 的位置，我会执行以下操作： padding-left: 15%; 现在，这对于某些分辨率可能效果很好，但是对于其他人，我可能需要该值更高。
对于屏幕分辨率差异，更有经验的 Web 开发人员会做什么？
I am creating a website and would like to get the opinion of some of the more experienced web developers.
How does one create a website where the element style attributes (padding, margin, height, width, etc) are appropriate for the users screen resolution?
With CSS i get to choose one value and that is the final value which will be displayed for all users, regardless of their browsing resolution.
For example, say i would like an image to be displayed 10% to the left of its container i would do the following: padding-left: 15%; Now, that may work fine for some resolutions but for others i may need that value to be higher.
What do more experienced web developers do in regards to screen resolution differences?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
听起来您的目标是让您的布局在任何分辨率下看起来都一样，但这并不实际。请记住，图像缩放比例很差！大多数设计师所做的是尽可能使用百分比，以使布局“流动”以适应大多数分辨率，同时保持吸引力。
如果你分析（例如）Stack Overflow。您会看到它是一个固定宽度的集合，本身在浏览器中居中。苹果公司也做了同样的事情，一些艺术元素可以在任何窗口宽度上优雅地显示。这是一个艺术问题，我不确定是否能给出比这更清晰的答案。
It sounds like your goal is to have your layout look literally the same at any resolution, which isn't really practical. Remember that images scale poorly! What most designers do is use percentages where possible to allow the layout to "flow" to fit most resolutions while remaining attractive.
If you analyze (for example) Stack Overflow. you'll see that it is a fixed-width set that is itself centered in the browser. Apple does the same thing, with some art elements that are displayed gracefully at any window width. It's an artistic problem, and I'm not sure the answer can be given with any more clarity than that.
这完全取决于您的设计目标。
大多数设计师使用固定宽度的区域并让它在屏幕上居中。
在某些情况下，您可以使用 CSS 媒体查询将特定规则应用于不同类型和尺寸的屏幕（浏览器支持有限）。
您可以使用 min/max-width 来处理许多内容变得太大或太小的情况 - 但对于边距没有等效的方法。
SVG 图形可用于提供在任何分辨率下看起来都不错的可缩放图像。
一些公司为移动用户提供完全独立的网站。
还有其他提示和技巧，但一般来说，大多数设计人员通过使用固定宽度布局来避免这些问题 - 尽管这并不总是理想的。
It depends entirely on your design goals.
Most designers use fixed-width areas and let it center on the screen.
In some cases you can use CSS media-queries to apply specific rules to different types and sizes of screens (browser support is limited).
You can use min/max-width to handle many cases of content growing too large or small - but there is no equivalent for margins.
SVG graphics can be used to provide scalable images that look good at any resolution.
Some companies provide an entirely separate site for mobile users.
There are other tips and tricks but in general most designers avoid these issues by using fixed-width layouts - even though that's not always ideal.
我通常以 em 单位定义这些样式，它与字体大小相关。因此，增加文本大小会增加填充和填充。按比例分配利润。
I usually define those styles in em units, which are relative to the font size. So, increasing the text size increases padding & margins proportionately.