diff options
Diffstat (limited to 'examples/postcss/node/dest/main.css')
-rw-r--r-- | examples/postcss/node/dest/main.css | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/examples/postcss/node/dest/main.css b/examples/postcss/node/dest/main.css new file mode 100644 index 0000000..1831050 --- /dev/null +++ b/examples/postcss/node/dest/main.css @@ -0,0 +1,78 @@ +/* responsive-font-size property with `px` unit */ +.selector-1, +.disable-responsive-font-size .selector-1, +.disable-responsive-font-size.selector-1 { + background-color: red; + width: 300px; + font-size: 2rem; +} + +@media (max-width: 1200px) { + .selector-1 { + font-size: calc(1.2rem + 1.066667vw); + } +} + +/* responsive-font-size property with `rem` unit */ +.selector-2, +.disable-responsive-font-size .selector-2, +.disable-responsive-font-size.selector-2 { + font-size: 2rem; +} + +@media (max-width: 1200px) { + .selector-2 { + font-size: calc(1.2rem + 1.066667vw); + } +} + +/* responsive-font-size property with !important */ +.selector-3, +.disable-responsive-font-size .selector-3, +.disable-responsive-font-size.selector-3 { + font-size: 2rem !important; +} + +@media (max-width: 1200px) { + .selector-3 { + font-size: calc(1.2rem + 1.066667vw) !important; + } +} + +/* rfs shorthand */ +.selector-4, +.disable-responsive-font-size .selector-4, +.disable-responsive-font-size.selector-4 { + font-size: 2rem; +} + +@media (max-width: 1200px) { + .selector-4 { + font-size: calc(1.2rem + 1.066667vw); + } +} + +/* not supported unit */ +.selector-5 { + font-size: 2em; +} + +/* special value */ +.selector-6 { + font-size: inherit; +} + +/* responsive-font-size property inside @support-query */ +@supports (display: flex) { + .selector-7, + .disable-responsive-font-size .selector-7, + .disable-responsive-font-size.selector-7 { + font-size: 1.75rem; + } + + @media (max-width: 1200px) { + .selector-7 { + font-size: calc(1.15rem + 0.8vw); + } + } +} |