stylus (css) 根据当前屏幕宽度计算

Question

我想做类似

的事情

.findcol1 > img
        max-width 1.5em
        max-height 1em
        @media screen and (min-width 700px)
                max-width [1.5 + Math.floor("current_screen_width"/700)]em
                max-height [1 + Math.floor("current_screen_width"/700)]em

如何在手写笔中执行此操作？

（所以最大宽度应该像 -
1.5em for width between 0px and 699px 2.5em for width between 700px and 1399px 3.5em for width between 1400px and 2099px, and so on)

Answer 1

选项 1 -

.findcol1 > img
        width 1.5em
        height 1em
        @media screen and (min-width 700px) and (max-width 1399px)
                width 2.5em
                height 2em
        @media screen and (min-width 1400px) and (max-width 2099px)
                width 3.5em
                height 3em

选项2-（近似解）

$emval = calc((700px - 1em) + 1em)
// find number of em's in 700px

.findcol1 > img
        width 1.5em
        height 1em
        @media screen and (min-width 700px)
                width "calc((100% - %s + 1.5em)" % $emval
                // Subtract em's in 700px from em's in current screen size 
                // and add to original width
                height @width/1.5
                // If aspect ratio is not 1.5, we can do 
                // height "calc((100% - %s + 1em)" % $emval
                // Here ^^ 100% will equal 100% height of parent element
                max-width 3em
                max-height 2em

floor() 仅适用于实数，不适用于 Stylus 中的变量！

stylus (css) 根据当前屏幕宽度计算

stylus (css) calculation based on current screen width

css

stylus