rem 适配方法如何计算 HTML 跟字号及适配方案？

合集 - 前端面试(96)

1.H5 的新特性有哪些？C3 的新特性有哪些2023-06-20 2.Localstorage、sessionStorage、cookie 的区别2023-06-20 3.H5 的浏览器存储有哪些2023-06-20 4.简述 transform，transition，animation 的作用？2023-06-20 5.CSS 中选择器的优先级以及CSS 权重如何计算2023-06-20 6.HTML5 的离线存储怎么使用，工作原理是什么？2023-06-20 7.css3制作三角形2023-06-20

8.rem 适配方法如何计算 HTML 跟字号及适配方案？2023-06-20

9.定位相关2023-06-20 10.Modele build failed: TypeError: this.getResolve is not a function at Object.loader...2023-06-20 11.BFC 是什么2023-06-21 12.使用CSS怎么让Chrome支持小于12px的文字比如10px2023-06-21 13.创建对象有几种方法2023-06-21 14.JavaScript中的toLocaleString()方法你知道吗？2023-06-22 15.暂时性死区2023-06-22 16.作用域链和原型链2023-06-22 17.dom 节点的 Attribute 和 Property 有何区别？2023-06-23 18.简单说一下页面重绘和回流？2023-06-25 19.defer 属性async 属性2023-06-25 20.解释一下什么是回调函数,并提供一个简单的例子2023-06-25 21.你对原型（prototype）理解2023-06-25 22.简单说说 js 中的继承2023-06-25 23.介绍 this 各种情况2023-06-25 24.for in 和 for of 的区别2023-06-25 25.判断一个字符串中出现次数最多的字符，统计这个次数2023-06-25 26.jQuery 的 ajax 返回的是 promise 对象吗？2023-06-26 27.echarts切换其他组件统计图时，出现卡顿问题如何解决2023-06-26 28.module、export、import 有什么作用2023-06-26 29.包含Symbol类型的对象遍历取key使用Reflect.ownKeys2023-06-26 30.常见的 HTTP 状态码以及代表的意义2023-06-26 31.HTTP 与 HTTPS 的区别2023-06-27 32.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么2023-06-27 33.浏览器如何加载页面的，script 脚本阻塞有什么解决办法，defer 和 async 的区别是什么2023-06-27 34.Vue 数据双向绑定的原理是什么?2023-06-28 35.组件中写 name 选项有什么作用2023-06-28 36.怎么在组件中监听路由参数的变化？2023-06-28 37.怎么捕获 Vue 组件的错误信息？2023-06-28 38.computed 中的属性名和 data 中的属性名可以相同吗2023-06-28 39.Vue 中 key 值的作用是什么？2023-06-28 40.你对 Vue.js 的 template 编译的理解？2023-06-28 41.VNode 是什么？什么是虚拟DOM？2023-06-28 42.简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(),wx.navigateBack(), wx.reLaunch()的区别？2023-06-30 43.微信小程序长按识别二维码2023-06-30 44.原生微信小程序2023-06-30 45.小程序中 canvas 的图片不支持 base64 格式2023-06-30 46.小程序关联微信公众号如何确定用户的唯一性？2023-06-30 47.setState和useState执行2023-06-30 48.如何进行前端性能优化2023-06-30 49.Vue和React中diff算法区别2023-07-01 50.通过code换取网页授权access_token和基础支持中的access_token有以下不同之处：2023-07-04 51.H5调起支付API2023-07-04 52.使用Vue前端实现微信授权、微信支付和支付宝支付的具体代码和流程。2023-07-04 53.js中显示转换类型2023-08-30 54.js小常识2023-08-31 55.js获取浏览器地址的query参数并以键值对的方式展示(对象)封装一个方法2023-09-02 56.js寄生组合式继承2023-09-02 57.ts2023-09-04 58.promise知识12023-09-04 59.vue中v-bind和v-model的区别是什么2023-09-05 60.Vue中key的作用2023-09-05 61.在Vue 3中，与Vue 2相比，有一些改进和优化的diff算法。2023-09-05 62.浏览器解析html2023-09-05 63.浏览器渲染HTML2023-09-05 64.Object.entries()2023-09-05 65.vue实现虚拟dom转换成真是dom的原理2023-09-05 66.为什么vue数组下标修改监听不到2023-09-07 67.Vue 3 在某些场景下可能表现出比 Vue 2 更低的性能2023-09-07 68.vue里表单验证的v-model.number的坑2023-09-08 69.开启严格模式2023-10-14 70.js手写一个call2023-10-14 71.js手写一个apply2023-10-14 72. 手写一个 bind 方法2023-10-14 73.js寄生组合式继承2023-10-14 74.react中的useState修改状态获取最新状态值2023-10-15 75.函数柯里化js2023-10-20 76.axios请求中断_下载中断和下载进度2023-10-20 77.axios请求重试_核心原理2023-10-20 78.axios请求重试_axios-retry插件2023-10-20 79.虚拟列表-渲染 10 万条数据2023-10-21 80.vue-office 组件2023-10-21 81.threejs2023-10-22 82.把原生 DOM 标签转换后加入到 3D 场景空间中显示2023-10-24 83.three.js 物体要使用光线投射技术，计算是否点击位置与物体有交叉2023-10-24 84.threejs基本函数2023-10-25 85.二分查找算法2023-10-26 86.js判断字符串是否连贯2023-10-26 87.世界坐标系和模型坐标系2023-10-28 88.设置车模型中每个小物体 castShadow = true2023-11-04 89.Vue3 echarts 组件化使用 resizeObserver2023-11-05 90.网页验证码的作用 *网页中几种常见验证码2023-11-07 91.多个装饰器一起es6装饰器2023-11-07 92.flex属性2023-11-07 93.移动端兼容问题2023-11-07 94.那什么是URL、URI、URN？2023-11-07 95.面试题03-03 96.面试前端03-03

通用方案
1、设置根 font-size：625%（或其它自定的值，但换算规则 1rem 不能小于12px）2、通过媒体查询分别设置每个屏幕的根 font-size
3、CSS 直接除以 2 再除以 100 即可换算为 rem
优：有一定适用性，换算也较为简单
劣：有兼容性的坑，对不同手机适配不是非常精准；需要设置多个媒体查询来适应不同手机，单某款手机尺寸不在设置范围之内，会导致无法适配网易方案
1、拿到设计稿除以 100，得到宽度 rem 值
2、通过给 html 的 style 设置 font-size，把 1 里面得到的宽度 rem 值代入x document.documentElement.style.fontSize =
document.documentElement.clientWidth / x + ‘px‘;
3、设计稿 px/100 即可换算为 rem
优：通过动态根 font-size 来做适配，基本无兼容性问题，适配较为精准，换算简便劣：无 viewport 缩放，且针对 iPhone 的 Retina 屏没有做适配，导致对一些手机的适配不是很到位
手淘方案
1、拿到设计稿除以 10，得到 font-size 基准值
2、引入 flexible
3、不要设置 meta 的 viewport 缩放值
4、设计稿 px/ font-size 基准值，即可换算为 rem
优：通过动态根 font-size、viewpor、dpr 来做适配，无兼容性问题，适配精准。劣：需要根据设计稿进行基准值换算，在不使用 sublime text 编辑器插件开发时，单位计算复杂