rem适配布局

2023-12-16 14:43:15

1. rem基础
- rem单位
- cssrem
2. rem适配方案
- rem实际开发适配方案
- rem 适配方案技术使用（2019年市场主流）
  - 方案1：
  - 方案2(flexible.js)

1. rem基础

rem单位

rem (root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。

比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

px、em、rem区别介绍

/* 根html font-size 设为 12px 
	确定了单位数值比（此时：12px = 1rem）
	页面的所有标签若用到rem单位 都根据这个比例
*/
html {
   font-size: 12px;
}
/* 
此时 div 的字体大小就是 24px */       
div {
    font-size: 2rem;
}

rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

cssrem

cssrem：px 转换rem vscode插件

使用注意点

使用过程简单，再输入css像素单位时会出现提示框提示转换为rem

默认的html字体大小为16px，若这当前设备（设计稿）的字html font-size的大小不是16px，要到vscoe的设置里手动修改Cssrem:Root Font Size的大小。

2. rem适配方案

rem实际开发适配方案

① 按照设计稿与设备宽度的比例，利用 CSS3媒体查询动态计算并设置html根标签的font-size大小。
② CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值。

rem 适配方案技术使用（2019年市场主流）

方案1：

less
媒体查询
rem

方案思路：

确定设计稿的尺寸

设计稿常见尺寸宽度

设备常见宽度

iphone4\5 640px

iphone6\7\8 750px

Android 常见320px、 360px、 375px、 384px、 400px、 414px、 500px、 720px ，大部分4.7~5寸的安卓设备为720px

一般情况下，以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果现在基本以750为准。
确定不同屏幕尺寸下的html字体大小。

html字体大小 = 屏幕宽度 / 屏幕划分的份数

屏幕划分的份数：10、15、20等（划分标准不一）
页面元素大小单位px转换为rem单位。

页面元素rem值 = 页面元素值(px) / html font-size字体大小
通过媒体查询实现不同屏幕尺寸下的html font-size的大小变换。

设备	常见宽度
iphone4\5	640px
iphone6\7\8	750px
Android	常见320px、 360px、 375px、 384px、 400px、 414px、 500px、 720px ，大部分4.7~5寸的安卓设备为720px

方案2(flexible.js)

flexible.js
rem

1.简洁高效的rem适配方案flexible.js

简介

flexible.js官方地址

手机淘宝团队出的简洁高效 移动端适配库
功能

该适配库的js文件做了预处理，原理是把当前设备划分为10等份，但是不同尺寸的设备下，比例还是一致的。（所谓的比例：当前屏幕的宽度 / 当前html font-size恒等于10）
使用

由于该适配库自动定义好了不同尺寸设备下的html font-size的大小，所以可以不用手动的通过媒体查询定义，简化了开发。
1. 确定好当前页面的hmtl font-size,当前设备页面(设计稿)的宽度/10
2. 页面里的元素大小单位转换为rem

flexible.js源码解析

(function flexible(window, document) {
    // 获取的html 的根元素
    var docEl = document.documentElement
        // dpr 物理像素比
    var dpr = window.devicePixelRatio || 1

    // adjust body font size  设置我们body 的字体大小
    function setBodyFontSize() {
        // 如果页面中有body 这个元素 就设置body的字体大小
        if (document.body) {
            document.body.style.fontSize = (12 * dpr) + 'px'
        } else {
            // 如果页面中没有body 这个元素，则等着 我们页面主要的DOM元素加载完毕再去设置body
            // 的字体大小
            document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10    设置我们html 元素的文字大小
    function setRemUnit() {
        var rem = docEl.clientWidth / 10
        docEl.style.fontSize = rem + 'px'
    }

    setRemUnit()

    // reset rem unit on page resize  当我们页面尺寸大小发生变化的时候，要重新设置下rem 的大小
    window.addEventListener('resize', setRemUnit)
        // pageshow 是我们重新加载页面触发的事件
    window.addEventListener('pageshow', function(e) {
        // e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面，也需要从新计算一下rem 的大小
        if (e.persisted) {
            setRemUnit()
        }
    })

    // detect 0.5px supports  有些移动端的浏览器不支持0.5像素的写法
    if (dpr >= 2) {
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) {
            docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
    }
}(window, document))

码农公寓