lessvw与rem实现自适应
vw视口宽度,由于本事就是跟随屏幕变化的,所以更具有灵活性,不用js获取窗口来动态设置窗口宽度,现在用的比较少,公司目前不让用,先记录,也许以后用得到。
//配合less 不用自己换算,设计稿750 px
//定义变量 vw=7.5vw
//假设元素400px宽度,换算成vw即为400/@vw
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比江川网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式江川网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖江川地区。费用合理售后完善,十多年实体公司更值得信赖。
@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虽然看上去不那么直观,但是适用性更强。
分享文章:lessvw与rem实现自适应
网站地址:http://myzitong.com/article/gojged.html