首页 > 移动平台 > 详细

移动视口,以及适配

时间:2020-03-15 00:58:31      阅读:116      评论:0      收藏:0      [点我收藏+]

---【移动视口标签】:

  = <meta name="viewport" content="width=device-width,user-scalable=no,

           initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

---【移动端的css初始化】  normalize.css   样式表

 

---【rem 实际开发适配方案】: rem+媒体查询+less 技术

  1,假设设计稿是750px

  2,假设划分为15等分,可以是10分

  3,每一份,作为html字体大小,这里就是75px

  4,那么在320设备的时候,字体大小就是32px

  5,用我们页面元素的大小除以不同的html 字体大小会发现他们比例还是相同的

  html:{ font-size:50px}

  = @num;

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

    html{  font-size:320px/@num  }

  }

 

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

    html{  font-size:360px/@num  }

  }

 

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

    html{  font-size:3750px/@num  }

  }

 

--=引入设配     @import "xxx.适配。js"

移动视口,以及适配

原文:https://www.cnblogs.com/zzhqdkf/p/12495211.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!