lessvw与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虽然看上去不那么直观，但是适用性更强。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文标题：lessvw与rem实现自适应-创新互联
本文路径：http://cdiso.cn/article/cogdeh.html

lessvw与rem实现自适应-创新互联

其他资讯