MENU

移动端页面rem 适配方案

October 2, 2021 • Read: 1166 • 编码

rem基础

什么是rem
    em是父元素继承的字体大小,这样就存在一个问题,在对任何元素进行设置,都需要知道父元素的字体大小,在我们多次使用时会出现无法预知的错误
    rem是CSS3的一个相对单位,rem是相对于根元素html字体大小来计算的,即( 1rem = html字体大小 ),这样就意味着我们只需要在根元素设置一个参考值,在根元素中设置多大的字体,这完全根据自己的需要来定。

rem兼容性
    目前,IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了rem
    rem目前主要是在移动端页面上使用的比较多,所以 请放心用吧,所有的手机浏览器均支持rem

rem有什么优点?
    只要通过JS设置好合适的html字体大小,就可以实现在所有页面均以这个比例去渲染页面,也就是所谓的等比例缩放
    只要美工在设计网页的时候不使用特殊的文本字体时,几乎能100%实现页面效果。

使用方法

第一步,在页面head头部声明缩放标签
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

第二步,在加载页面的时候执行下面这JS
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
    | 这个段代码的意思是获取页面的宽度 / 效果图宽度 *100,将这个值赋给html=根元素的字体大小
    为什么是640?
        iphone5的设备像素宽度为640px,CSS逻辑像素为320px,2倍的像素缩放比
        大部分手机页面的效果图设计的宽度为640px,也有部分设计师以iphone6的750px为效果图宽度
        可以将效果图等比缩放至640px或者将640改为为效果图的宽度

    为什么要乘以100?
        假设,1rem=20px,需要一个宽度60px,高度40px的元素
        那么宽度为3rem,高度为2rem即可,但是当需要一个宽度为55px,高度为37px的宽度时,则需要通过计算器计算比例:宽度2.75rem,高度1.85rem
        为什么不一开始就把1rem=1px呢?这样换算起来不是更简单?
        浏览器一般都有最小字体限制,比如谷歌浏览器,最小中文字体就是12px,所以实际上没有办法让1rem=1px。
        综上所述,写代码的时候在将rem设置为100倍,更方便计算rem数值


设置CSS的时候应该怎么确定值?
    当页面宽度与效果图宽度一样的时候,1rem与像素的比例就是1比1
    因为最小字体的限制,我们将rem的值乘以100倍,写代码的时候就需要将效果图中的像素除以100即可,如20px,则为0.2rem

rem中的坑

当设置边框宽度为0.01rem时因为缩放的关系导致边框小于1px 无法显示 ,建议直接设置为1px
background-size 设置rem无效,建议使用百分比代替
rem布局缩放雪碧图
    在rem布局方案下,使用contain或cover来缩放背景图片就无法奏效了。因为元素的背景其实是sprite图片的局部,contain和cover只能对整张图片进行缩放,没办法控制到局部的大小。 
    比如雪碧图大小为200*50px
    则  background-size: 2rem 0.5rem;

页面滚动问题

在移动端 如果不对元素做限制,则会出现整个页面随着手势横向滚动的情况

可以使用 touch-action: pan-y; 只允许上下滚动,不允许左右滚动。

笔记地址:https://www.mubucm.com/doc/4OnLPXGGx