less vw 与 rem 实现自适应

vw视口宽度，由于本事就是跟随屏幕变化的，所以更具有灵活性，不用js获取窗口来动态设置窗口宽度，现在用的比较少，公司目前不让用，先记录，也许以后用得到。
//配合less 不用自己换算，设计稿750 px
//定义变量 vw=7.5vw
//假设元素400px宽度，换算成vw即为400/@vw

@vw: 7.5vw;

.container {
padding: 51/@vw 43/@vw 23/@vw 45/@vw;

.fisttitle {    display    : flex;    align-items: center;}.title {    font-size  : 37/@vw;    padding    : 0 18/@vw 0 10/@vw;    font-weight: 600;}.lef_png {    margin-right: 17/@vw;}.lef_png,.rig_png {    width : 60/@vw;    height: 4/@vw;}.commens {    width : 36/@vw;    height: 34/@vw;}ul {    li {        h6 {            color       : #333;            font-size   : 32/@vw;            padding-left: 64/@vw;            margin-top  : 51/@vw;            font-weight : 600;            line-height : 45/@vw;        }        .q1 {            background     : url('./../images/q1.png') no-repeat left center;            background-size: 52/@vw 32/@vw;        }        p {            color      : #666;            font-weight: 400;            font-size  : 30/@vw;            line-height: 42/@vw;        }        a {            color      : #1E89FE;            font-size  : 30/@vw;            line-height: 42/@vw;        }        span {            margin : 0 10/@vw 0 10/@vw;            display: inline-block;        }    }}

}

下面用最熟悉的rem 实现一下，因为rem不能实时变化，所以需要通过js 或者媒体查询来辅助，本案例通过media 来实现

html {
@firstViewportWidth: 750px; //默认UI设计尺寸
@defaultFontSize : 100px; //默认初始fontsize大小

@media screen and (width: @firstViewportWidth) {    //绑定到没听查询    font-size: @defaultFontSize;    min-width: 100%;};//根据传入的屏幕尺寸@viewportWidth计算出与初始@firstViewportWidth的比例，然后将默认的fontsize> @defaultFontSize对应的放大缩小.media(@viewportWidth, @firstViewportWidth: 750px) {    @media screen and (min-width: @viewportWidth) {        font-size: @defaultFontSize / (@firstViewportWidth / @viewportWidth) !important;    }};.media(320px);.media(375px); //所要设配的屏幕尺寸.media(360px);.media(411px);.media(414px);.media(768px);

}

@media screen and (min-width: 768) {
html {
font-size: 100px !important;
}
}

@vw: 7.5vw;

.container {
padding: .51rem .43rem .23rem .45rem;

.fisttitle {    display        : flex;    align-items    : center;    justify-content: space-between;    .middleware {        text-align: center;    }}.title {    font-size  : .37rem;    padding    : 0 .18rem 0 .18rem;    font-weight: 600;}.lef_png {    margin-right: .17rem;}.lef_png,.rig_png {    width : .6rem;    height: .04rem;}.commens {    width : .36rem;    height: .34;}ul {    li {        h6 {            color       : #333;            font-size   : .32rem;            padding-left: .64rem;            margin-top  : .51rem;            font-weight : 600;            line-height : .45rem;        }        .q1 {            background     : url('./../images/q1.png') no-repeat left center;            background-size: .52rem .32rem;        }        p {            color      : #666;            font-weight: 400;            font-size  : .30rem;            line-height: .42rem;        }        a {            color      : #1E89FE;            font-size  : .30rem;            line-height: .42rem;        }        span {            margin : 0 .10rem 0 .10rem;            display: inline-block;        }    }}

}

对比来看，rem看上去简洁一些，不过需要手动去设置所有的需要自适应额屏幕宽度，vw虽然看上去不那么直观，但是适用性更强。