我打算用Vue.js 2.0编写一个通用的组件库，希望该库可以在多个平台上运行。这个问题是关于组件风格的最佳实践。
在PC /浏览器上，我们通常使用px为固定宽度或流布局编写CSS。在移动平台（webview或浏览器）上，我们通常使用vw / rem编写CSS以实现灵活布局。
我看到，有些组件只适合一个（PC或移动平台），但仍然有一些组件是常见的和多功能性，如Button，GridView，InputField等。
例如，有一个Button组件具有默认的填充样式。为了更好的适应性，我应该将填充值设置为什么单位？ px？ rem？为了达到这个目标，做这些事情的最佳做法是什么？
事实上，这个问题不仅与Vue有关，而且与任何允许开发组件的框架相关，例如：React，Angular，Ember等。
答案 0 :(得分：0)
我建议您不要将浏览器/ PC布局和移动应用视为不同。从外观上看，你无法确定它们的下一个形状因素。即使对于已被证明是一致的平台，例如iPhone / iOS，这也是如此。
响应式网页设计在两种环境中都是相同的，您的布局应该是准备好的＆＃39;因为形状因素的变化。
响应式网页设计与React to Angular或其间的任何内容都没有区别。唯一不同的是CSS实际上如何进入您的应用程序。
无论你为什么设计，你应该：
响应用户及其使用的设备的需求。布局会根据设备的大小和功能而变化。
基本原则是：适应，回应和克服。
在Vue中，要走的路是：隔离组件，包括样式 - ＆gt;尽可能使用范围样式<style scoped></style>。
然后（不是特定于Vue），使用你想要的流体布局;有些人选择％，有些人选择 vh / vw 或 em / rem 。只要它流畅，你可能会好起来的。许多人为容器选择 vh / vw 并在之后使用百分比，但没有默认模式。对于百分比，有些人发现在calc()中混合更容易，这可能是一个有用的响应工具。
关于您的按钮示例，使用rem或em作为默认设置可能是个好主意。但是，对于某些组件，使用px可能有意义 - 不要害怕混合搭配。这可以为您节省大量代码，并且没有关于它的黄金法则。
您的断点不应该在设备之后形成，而是找出可以更好地呈现内容的位置。通过这种方式，您可以构建更具前瞻性的布局，这可能会成为维护的噩梦。
选择让您感觉舒适的任何东西。 您可以自行组合工具并使CSS适合您/遵循某些RWD模式。
话虽如此，here是您在构建自适应应用时可以遵循的一些模式：
如果仍有疑问，我鼓励你采取course。
在本课程中，您将通过Google的Pete LePage了解响应式网页设计的基础知识！您可以创建自己的响应式网页，该网页适用于任何设备 - 手机，平板电脑，桌面或其他任何设备。一开始可能感觉有点慢，但是到最后你会学到很多东西。