We treat the pixel-perfect values as pure numeric values, and multiply them by the difference between the current viewport width and the “ideal” viewport width from the designs. Wrapping upĪll of this is an alternative way to implement fluid UIs. Now we can benefit from both media queries and our pixel-perfect linear scaling. So, if we are to target the title of one of these card widgets, our SCSS might look something like this. Let’s work in CSS pixel values and use SCSS for speed and convenience. We need to make it in such a way that it scales perfectly and preserves all the texts line counts, margins, image sizes, etc. Let’s try to implement this awesome dashboard, courtesy of Craftwork. Further, we can still use pixel values and automatically convert them to relative CSS units if working in pixels is more comfortable or familiar. They scale appropriately based on the device screen real estate, all while preserving their pixel-perfect proportions.
However, we can also achieve fluid proportional scaling UIs using pixel values in CSS. In other words, what if we want to scale designs uniformly? Of course, one can scale the content with CSS transforms based on the available width as covered in this article - this way, the correct ratios are preserved. That loses pixel perfection and usually introduces text wrapping and layout shifts once the screen goes below or above a certain threshold.īut what if we really do want pixel perfection? What if, let’s say, we are developing a complex real-time analytics dashboard to be viewed on large TVs at a conference room or as some PWA to be opened exclusively on mobile and tablet devices, as opposed to text-heavy blogs and news websites? Those are cases where we need more precision. Most of those examples, though, use relative CSS units and unitless values to achieve fluid scaling. You can find plenty of in-depth coverage right here on CSS-Tricks in articles like this one or this one. Dynamically scaling CSS values based on the viewport width is hardly a new topic.
0 kommentar(er)
