美文网首页
适配方案vw vh

适配方案vw vh

作者: LycorisHerb_ts | 来源:发表于2018-05-15 12:00 被阅读0次

    vw:相对于视窗的宽度[视窗的宽度是100vw]【视窗window.innerWidth】

    vh:相对于视窗的高度[视窗的高度是100vh]

    vmin:视口宽度或高度,选择小的那个

    vmax:视口宽度或高度,选择大的那个

    与stylus结合使用vw vh 单位

    以iphone6尺寸作为基准

    $vw_base = 750

    vw_count(x)

          (x / 750)*100vw

    .item

        height vw_count(100)  //在设计图上item元素高度为100

        line-height vw_count(100)

    rem和vw vh结合实现布局优化

    给根元素设置随着饰扣变化而变化的vw单位,实现动态改变其大小

    限制根元素字体大小的最大最小值,配合body加上最大宽度和最小宽度

    以psd750尺寸作为基准

    $vw_fontsize = 75

    rem($px)

        ($px / $vw_font-size) * 1rem     // 1rem 对应设计图的尺寸为75px

    html{

        font-size : 10vw //  ( 75px / 750 ) * 100vw

    }

    .item

        height  rem(100)  //在设计图上item元素的告诉为100px

    相关文章

      网友评论

          本文标题:适配方案vw vh

          本文链接:https://www.haomeiwen.com/subject/wlvddftx.html