In my current project, I am looking to create a universal component library using Vue.js 2.0 that can be seamlessly integrated across various platforms. The focus of this query lies in establishing the most effective styling practices for components.
Typically, when designing for desktop browsers, CSS is tailored for fixed-width or fluid layout using px units. Conversely, when targeting mobile platforms (webview or browser), a more flexible approach using vw / rem units is preferable.
While some components are inherently platform-specific, there are those like Button, GridView, and InputField that possess universal appeal and utility.
Take, for instance, a Button component with a predefined padding style. In order to enhance its adaptability, the choice of unit for setting the padding value becomes pivotal. Should it be px? rem? What constitutes the best practice to achieve the desired outcome?
This query transcends Vue and applies to any framework enabling component development, including React, Angular, Ember, to name a few.