rem

通过sass动态设置rem

移动端我们一般是根据iPhone6的375来进行开发的

ex:

js文件：

let htmlWidth = document.documentElement.clientWidth || document.body.cilentWidth;
// 获取视窗高度
let htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = htmlWidth / 10 + 'px';
// console.log(htmlWidth,htmlWidth / 10);
//动态修改font-size
window.addEventListener('resize',()=>{
  let htmlWidth = document.documentElement.clientWidth || document.body.cilentWidth;
  let htmlDom = document.getElementsByTagName('html')[0];
  htmlDom.style.fontSize = htmlWidth / 10 + 'px';
})

在vscode中编写sass文件：

@function px2rem($px) {
  $rem:37.5px;/* 基准值iphon6 375/10 */
  @return ($px / $rem) +rem;
}
/* 以iPhone6 为主 设计给的尺寸要比实际大两倍 */
html{
  background: #f8f8f8;
}
.header{
  width: 100%;
  height: px2rem(40px);
  background: red;
  .header-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: px2rem(40px);
    padding: 0 px2rem(23px);
    .header-item{
      color:#ffcdce;
      font-size: px2rem(16px);
      &:nth-child(2){//&:等同于父元素
        color: #fff;
        font-size: px2rem(17px);
      }
    }
  }
}

版权声明：本文来源博客园，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://www.cnblogs.com/lyt598/p/11636372.html
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2019-11-17 12:58:37
阅读 ( 1058 )
分类：

rem

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看