美文网首页
移动rem布局

移动rem布局

作者: yiqian091 | 来源:发表于2019-04-17 14:27 被阅读0次

1、通过计算宽度来换算字体比例

<script type="text/javascript">

        ! function () {

            var html = document.documentElement;

            var hWidth = html.getBoundingClientRect().width;

            html.style.fontSize = hWidth / 15 + 'px';

        }();

        window.addEventListener('resize', (e) => {

            var html = document.documentElement;

            var hWidth = html.getBoundingClientRect().width;

            html.style.fontSize = hWidth / 15 + 'px';

        })

    </script>

2、less预编译@r = 50rem;

3、根据二倍图设计稿直接换算

(例如设计稿给高度300px,less编译直接300/@r)

4、字体注意要放大二倍 比如设计稿给16px  less编译写32/@r

相关文章

  • 移动端布局方案 rem

    移动端布局方案 rem 示例

  • 移动端布局rem解决方案

    移动端布局rem解决方案

  • css-进阶-css开发技巧-Layout Skill:布局技巧

    Layout Skill 使用vw定制rem自适应布局 要点:移动端使用rem布局需要通过JS设置不同屏幕宽高比的...

  • 移动rem布局

    1、通过计算宽度来换算字体比例 ! function () { var html = docu...

  • 移动端、PC端屏幕适配

    移动端适配 页面引入ydui.flexible.js页面布局采用rem布局rem计算方式:设计图尺寸px / 10...

  • Rem布局

    移动web开发之rem布局 rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父...

  • rem布局

    移动端布局有很多做法,例如流式布局,固定宽度,Media Queries响应式布局,rem。 流式布局:在页面布局...

  • Vue移动端适配方案.md

    移动端主要采用rem布局,vue+webpack,通过webpack编译,将css中px自动转成rem或其它单位,...

  • 自适应rem布局

    rem是个低调的css单位,手淘在移动端的布局是基于rem处理的,当然还要基于viewport的处理。用rem单位...

  • 移动端rem布局

    我相信很多开始写移动端页面的同学们都用流式布局,弹性布局flex解决自适应的问题,今天本人介绍一下在实践中用的最简...

网友评论

      本文标题:移动rem布局

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