基于当前屏幕宽度的手写笔（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中的变量！