移动端布局原理快速记忆

333 阅读1分钟

一、rem布局:

记忆核心点:

  • 根据屏幕宽度动态计算根字体大小。
        document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth / 750) + 'px';

二、vw布局:

记忆核心点:

  • 所有屏幕都以页面总宽度为100vw进行计算。
        width = $px / baseWidth * 100vw; 

三、vw+rem布局:

记忆核心点:

  • 将根字体大小设置为10vw,元素宽度采用rem。

四、1px问题:

记忆核心点:

  • 用伪类模拟边框在缩放。