问使用Vue.js 2.0开发跨平台组件的最佳实践是什么？

EN

我建议你不要认为浏览器/ PC布局和移动应用程序是不同的。看起来，你不能确定下一步它们的外形会是什么。即使对于已经被证明是一致的平台，例如iPhone / iOS，也是如此。

响应式网页设计在两种环境中都是相同的，你的布局应该为形状的变化做好准备。

响应式网页设计与React to Angular或介于两者之间的任何东西没有什么不同。唯一不同的是CSS实际上是如何进入你的应用程序的。

无论你的设计目标是什么，你都应该：

响应用户和他们正在使用的设备的需求。布局会根据设备的大小和功能而变化。

基本原则是：适应、响应和克服。

技术视角

在Vue中，方法是：隔离组件，包括样式->尽可能使用作用域样式Vue

然后(不是特定于Vue)，可以随心所欲地使用流畅布局；有些人选择%，有些人使用vh / vw或em /rem<代码>E218。只要它是流动的，你可能就不会有问题。许多人选择vh / vw作为容器，然后使用百分比，但没有默认模式。有了百分比，一些人发现更容易与calc()混合，这可能是一个有用的响应工具。

关于您的按钮示例，使用rem或em作为默认值可能是个好主意。但是，对于某些组件，使用px可能是有意义的--不要害怕混合和匹配。这可以节省你大量的代码，而且没有金科玉律。

你的断点不应该在设备之后被整形，而是找出你的内容可以更好地呈现在哪里。这样，您将构建一个更面向未来的布局，这可能会成为维护的噩梦。

选择任何让你觉得舒服的东西。这取决于你结合你的工具，让CSS为你工作/遵循特定的RWD模式。

总结

也就是说，here是你在构建响应式应用时可以遵循的一些模式：

• Tiny
• 专栏Drop
• 布局移位器
• Tiny Tweaks
• 关闭画布

如果你仍有疑问，我建议你使用一个course。

在本课程中，您将学习使用谷歌的Pete LePage进行响应式网页设计的基础知识！您将创建自己的响应式网页，在任何设备上都能很好地工作-手机、平板电脑、台式机或介于两者之间的任何设备。开始的时候可能感觉有点慢，但到最后你会学到很多。