我打算用 Vue.js 2.0 写一个通用的组件库，希望这个库可以在多个平台上工作。这个问题是关于组件样式的最佳实践。
在PC/浏览器上，我们通常用px写定宽或流式布局的CSS。在移动平台（webview或浏览器）上，我们通常用vw/rem编写灵活布局的CSS。
我明白了，有些组件只适合其中一种（PC 或移动平台），但仍有一些组件通用且通用性强，例如 Button、GridView、InputField 等。
例如，有一个具有默认填充样式的 Button 组件。为了更好的适应性，我应该以什么单位设置填充值？ px? rem?对于目标，做这些事情的最佳实践是什么？
其实这个问题不仅仅与Vue有关，它与任何允许开发组件的框架都有关，例如：React、Angular、Ember等。
【问题讨论】：
标签： css angularjs reactjs responsive-design vue.js
我建议您不要再认为浏览器/PC 布局和移动应用程序是不同的。看起来，你不能确定他们两个接下来会出现什么外形。即使对于已被证明是一致的平台也是如此，例如 iPhone / iOS。
响应式网页设计在两种环境中都是相同的，您的布局应该为外形尺寸的变化“做好准备”。
响应式网页设计与 React 到 Angular 或两者之间没有什么不同。唯一不同的是 CSS 在您的应用中的实际获取方式。
无论您的设计目的是什么，您都应该：
响应用户和他们使用的设备的需求。布局会根据设备的大小和功能而变化。
基本原则是：适应、响应和克服。
在 Vue 中要走的路是：隔离组件，包括样式 -> 尽可能使用作用域样式<style scoped></style>。
然后（不是特定于 Vue），随心所欲地使用流畅的布局；有些人选择 %，有些人使用 vh / vw 或 em / rem。只要它是流动的，你可能会没事的。许多人为容器选择 vh / vw 并在之后使用百分比，但没有默认模式。有些人发现使用百分比更容易混入calc()，这可能是一个有用的响应工具。
关于您的按钮示例，默认使用rem 或em 可能是个好主意。然而，对于某些组件，使用px 可能是有意义的——不要害怕混合搭配。这可以为您节省大量代码，并且没有黄金法则。
你的断点不应该在设备之后形成，而是要弄清楚你的内容在哪里可以更好地呈现。通过这种方式，您将构建一个更加面向未来的布局，而这可能会成为维护的一场噩梦。
选择任何让您感觉舒适的东西。 您可以自行组合工具并让 CSS 为您工作/遵循特定的 RWD 模式。
话虽如此，here 是您在构建响应式应用时可以遵循的一些模式：
有一个course，如果仍有疑问，我鼓励你接受。
在本课程中，您将通过 Google 的 Pete LePage 学习响应式网页设计的基础知识！您将创建自己的响应式网页，该网页适用于任何设备 - 手机、平板电脑、台式机或介于两者之间的任何设备。一开始可能会觉得有点慢，但到最后你会学到很多东西。
【讨论】：