[csswg-drafts] [css-values-4] <length> add rw and rh to build responsive components

smalllong has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values-4] <length> add rw and rh to build responsive components ==
* please tag the issue title with the spec's shortname, like `[css-foo]`
* please link to the spec section you're talking about, or at least the spec
https://drafts.csswg.org/css-values-4/#relative-lengths
I think we need two new units: rw and rh.
As component based programming such as Vue.js gets more and more popular, there are needs that we want to build a responsive component which can scale larger or smaller but maintain a fixed layout (the ratio of all the inner elements been kept same). In the component, using percentages can solve some sort of these needs. But the font-size won't scale and there are some other problems. What I thought about is vw and vh, which can make all the elements inside the document scale together when the viewport scales.
Rather than viewport, the rw and rh means the relative width and height relative to it's relative container. For example, #parent{position: relative} #parent>#child{width: 20rw; height: 100rh; font-size: 10rh; line-height: 10rh} means child's width is 20% width of the parent, and the text's size in child is 10% height of the parent, then there can be 10 lines in the child occupy 20% width in the left whatever the parent's size is.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1645 using your GitHub account

Received on Tuesday, 25 July 2017 10:38:49 UTC