vw视口宽度,由于本事就是跟随屏幕变化的,所以更具有灵活性,不用js获取窗口来动态设置窗口宽度,现在用的比较少,公司目前不让用,先记录,也许以后用得到。
//配合less 不用自己换算,设计稿750 px
//定义变量 vw=7.5vw
//假设元素400px宽度,换算成vw即为400/@vw
//配合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 { h5 { 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 { h5 { 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虽然看上去不那么直观,但是适用性更强。