美文网首页我在学前端
通过计算rem,来适配移动端布局

通过计算rem,来适配移动端布局

作者: 辉lazy | 来源:发表于2018-04-22 22:37 被阅读11次

    核心点:rem 是以 html 的 font-size 的大小为基准

    分析:

    1. 一切以页面宽度为基准,就能保证还原设计稿
    2. 让页面宽度等于html 的 font-size
    3. html 的 font-size 等于 rem

    这样单位rem 与 页面宽度就联系到一起

    代码实现:

    // 准备工作
    // sass
    $designWidth: 640;// 按照640宽度的设计稿
    @function px( $px) {
      @return $px/$designWidth+rem;
    }
    // js
    var pageWidth = window.innerWidth
    document.write('<style>html{font-size:' + pageWidth + 'px;}</style>')
    
    // sass 中
    .div {
      float: left;
      width: px(320);
      height: px(320);
      border: 1px solid #000;
    }
    

    相关文章

      网友评论

        本文标题:通过计算rem,来适配移动端布局

        本文链接:https://www.haomeiwen.com/subject/uashlftx.html