我学习编码已有一段时间了，我确实学到了很多东西，但样式设计一直是我的痛处(这很尴尬，我知道)。我完全不知道导航栏应该有多少像素或任何组件应该有多宽。如果它对我来说太小/太大，我会调整它的大小。尺寸单位？不知道。不要误会我的意思。百分比、ems 和指标——我知道它的存在和它们的作用，但我做的一切都以像素为单位。我并不是说我编写的代码看起来很可怕而且没有响应。在事物看起来美观之前，这一切都是反复尝试，我花了很多时间让事物看起来漂亮。
假设我需要在 CSS 中制作一些简单的东西，比如弹出模式。我可能会将隐藏内容包装在 div 中，类为 modal，其内容在类为 modal__content 的 ，制作一个div 中按钮来关闭它和其中的一些文本。语义正确的 HTML 不是问题。动画和颜色？好吧，你明白了。我只是不知道如何设计它。那时我才意识到我只是在理论上了解 CSS。我可以编写代码，但我不知道模态应该是桌面屏幕的 300x200 像素框还是使用百分比？
如果您有一些保存的文章或书籍可以推荐，我将非常感谢。
我使用过 Bootstrap 和语义 UI。这些都是非常酷和方便的工具，但我希望在调整大小时了解一些深入的指南，因为我真的不知道某些东西应该是什么样子。大多数时候，我只是关注所有字体大小、填充和边距等。
最佳答案
我也不擅长平面设计。很少有人在图形设计和编程/脚本方面都表现出色。
SitePoint 有一些值得一读的书籍，尤其是第一本(均有平装本和电子书):
The Universal Principles of Design可能会涵盖您所询问的主题，尽管我还没有读过。
平面设计在很大程度上依赖于惯例(这通常是一件好事)、时尚(不太如此)以及设计师和客户的偏好。但是，了解各种准则很重要。我会在这里提到一些。
大号或加粗字体、 Action (视频和其他动画)以及对比鲜明的边框和背景吸引眼球。注意不要同时对太多元素给予这种视觉强调。 (这是组织主页的一个常见问题，许多派别竞相突出对他们来说最重要的事情。)
邻接意味着关系。例如，通常最好给出标题，例如<h2> ，上边距大于下边距。
元素之间往往需要适当的空间，但又不会占用太多屏幕空间。如果内容部分之间需要较大的空间，通常最好将它们缩小以用于移动设备。
动画有多种用途。有各种脉冲/“throbber”动画来指示正在加载内容或正在进行某种其他类型的处理。有些转换显示状态之间的非瞬时变化，例如菜单打开/关闭或更改是内容/图像 slider 的 View 。而其他人则主要是出于审美原因，以增加视觉趣味。
很高兴您提到语义。你用<label>吗适当的元素？
附言太多自称“网页设计师”的人不知道或拒绝承认 Web 图形设计与打印图形设计之间的区别。
关于css - 内容大小调整是否有指导方针？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56515324/