JavaScript教程之rem

当前位置:

首页 > 网站开发 > JavaScript教程 >

JavaScript教程之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);
      }
    }
  }
}

栏目列表