您现在的位置是:主页 > 网站制作 > Css|Html >

rem+媒体查询+less的实现

刘清2021-01-05 21:03个人博客人已围观

简介第一步 建立媒体查询 a { text-decoration : none ; } //一定写到最上面 html { font-size : 50px ; } //我们此次定义的划分为15份 @fs : 15 ; //320 @media screen and ( min-width : 320px ){ html { font-size : 320px / @fs ;

第一步 建立媒体查询

a{
    text-decorationnone;
}

//一定写到最上面
html{

    font-size50px;
}

//我们此次定义的划分为15份
@fs:15;

//320
@media screen and (min-width320px){

    html{
        font-size320px/@fs;
    }
}
//360
@media screen and (min-width:360px){
    html{
        font-size360px/@fs;
    }
}

//375
@media screen and(min-width:375px){

    html{
        font-size375px/@fs;
    }

}

//384
@media screen and(min-width:384px){

    html{
        font-size384px/@fs;
    }

}

//400
@media screen and(min-width:400px){

    html{
        font-size400px/@fs;
    }

}
// 414
@media screen and (min-width414px) {
    html {
        font-size414px / @fs;
    }
}
// 424
@media screen and (min-width424px) {
    html {
        font-size424px / @fs;
    }
}

// 480
@media screen and (min-width480px) {
    html {
        font-size480px / @fs;
    }
}

// 540
@media screen and (min-width540px) {
    html {
        font-size540px / @fs;
    }
}
// 720
@media screen and (min-width720px) {
    html {
        font-size720px / @fs;
    }
}

// 750
@media screen and (min-width750px) {
    html {
        font-size750px / @fs;
   }


第二步

less  加 样式


body {
  min-width320px;
  margin0 auto;
  width15rem;
  font-family:  Arial,Helvetica;
  background#fff;
  height100%;
}
.section {
  background#E3E3E3;
  width15rem;
  positionabsolute;
  left50%;
  transformtranslateX(-50%);
}


rem根据html中字体大小font-size进行改变

Tags:

很赞额!(74)

上一篇:维思网站总结

下一篇:rem+flexible.js插件

文章评论

站点信息

  • 建站时间:2018-12-1
  • 网站程序:织梦cms
  • 主题模板《今夕何夕》
  • 文章统计:299条
  • 文章评论:490条
  • 统计数据百度统计